compose-multiplatform icon indicating copy to clipboard operation
compose-multiplatform copied to clipboard

IME input to TextField does not work correctly on Dialog

Open subroh0508 opened this issue 3 years ago ‱ 1 comments

Library Version: 1.0.0-beta5 OS: macOS Catalina 10.15.6

When IME is enabled for a normal TextField, Japanese input is executed normally. However, for a TextField on a Dialog, even if the IME is enabled, half-width characters are input as is 😱

https://user-images.githubusercontent.com/8080435/140941390-2fd40db7-77f7-4e29-bfa1-c6a0333152e7.mp4

Code to reproduce

@Composable
fun SimplePresetSaveDialog(
    name: String?,
    onClose: () -> Unit,
    onClickSave: (String?) -> Unit,
) {
    var presetName by remember(name) { mutableStateOf(name) }

    FormDialog(
        onDismissRequest = onClose,
        title = { Text("プăƒȘă‚»ăƒƒăƒˆćă‚’ć…„ćŠ›") },
        confirmButton = {
            TextButton(onClick = {
                onClickSave(presetName)
                onClose()
            }) {
                Text("保歘")
            }
        },
        dismissButton = {
            TextButton(onClick = onClose) {
                Text("閉じる")
            }
        },
    ) {
        OutlinedTextField(
            presetName ?: "",
            onValueChange = { presetName = it },
        )
    }
}

@Composable
fun FormDialog(
    onDismissRequest: () -> Unit,
    confirmButton: @Composable () -> Unit,
    modifier: Modifier,
    dismissButton: @Composable (() -> Unit)?,
    title: @Composable (() -> Unit)?,
    shape: Shape,
    backgroundColor: Color,
    contentColor: Color,
    content: @Composable () -> Unit,
) = Dialog(
    onDismissRequest = onDismissRequest,
    properties = DialogProperties(),
) {
    Surface(
        modifier = modifier,
        shape = shape,
        color = backgroundColor,
        contentColor = contentColor,
    ) {
        Column(modifier = Modifier.width(IntrinsicSize.Max)) {
            Column(
                modifier = Modifier.fillMaxWidth()
                    .padding(horizontal = 24.dp),
            ) {
                Spacer(Modifier.height(24.dp))
                title?.let { FormDialogTitle(it) }
                Spacer(Modifier.height(24.dp))
                content()
            }

            Spacer(Modifier.height(28.dp))
            FormDialogButtons(confirmButton, dismissButton)
        }
    }
}

All of -> https://github.com/subroh0508/WING-Calculator

subroh0508 avatar Nov 09 '21 14:11 subroh0508