Pressing the return key in TextField triggers the parent container's clickable

[y-sugitani]

Describe the bug
When focusing on a TextField and displaying the virtual keyboard, pressing the return key triggers the clickable set on the parent container that contains the TextField. This may cause unintended behavior.

Affected platforms

• Android

Versions

• Kotlin version: 1.9.22
• Compose Multiplatform version: 1.6.2
• OS version(s): Android 14
• Device: Pixel 7a

To Reproduce

1. Create a new Compose Multiplatform project
2. Add the following code:

@Composable
@Preview
fun App() {
    val focusManager = LocalFocusManager.current
    var text by remember { mutableStateOf("") }
    var background by remember { mutableStateOf(Color.LightGray) }

    Box(
        modifier =
        Modifier
            .imePadding()
            .fillMaxWidth()
            .height(100.dp)
            .background(background)
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = null,
                onClick = {
                    background = Color.Red
                    focusManager.clearFocus()
                },
            ),
        contentAlignment = Alignment.Center
    ) {
        OutlinedTextField(
            value = text,
            onValueChange = { text = it },
        )
    }
}

3. Run the app on an Android device or emulator
4. Tap the TextField to focus it and display the virtual keyboard
5. Press the return key on the virtual keyboard
6. The parent container's clickable is triggered, and the background color changes to red

Expected behavior
Pressing the return key in the TextField should not trigger the parent container's clickable, and a line break should occur within the TextField.

Screenshots

android.mp4

Additional context
This behavior was observed on a Pixel 7a running Android 14. It is unknown whether the same behavior occurs on other devices or OS versions.

A reproducible project is available at https://github.com/blackcat-carnival/compose-bugreport-202404-02

[m-sasha]

The problem here is that the TextField reacts to, and consumes, the KeyDown event, while clickable reacts to KeyUp events.

The fix is probably to either have the textfield also consume the KeyUp for any consumed KeyDown, or for clickable to ignore KeyUp events whose KeyDown it didn't receive.

[m-sasha]

Since this is an issue upstream, please report it in the Android bug tracker: https://issuetracker.google.com/issues?q=status:open%20componentid:612128&s=created_time:desc

[y-sugitani]

Thank you for your response and the detailed explanation. With this information, I should be able to work around the issue in my project. Your help is much appreciated.

I have reported the bug to the Google Issue Tracker at https://issuetracker.google.com/issues/335342650