TextField cannot input in ExposedDropdownMenuBox, when ExposedDropdownMenu is expanded

[losomo]

Discussed in https://github.com/JetBrains/compose-multiplatform/discussions/4693

^{Originally posted by JasonMing April 24, 2024}

• Kotlin version*: 1.9.23
• Compose Multiplatform version*: 1.6.5

I'm trying to implement a filterable drop down menu in Compose Web by using Material3's ExposedDropdownMenuBox.

var expand by remember { mutableStateOf(false) }
var text by remember { mutableStateOf("") }
ExposedDropdownMenuBox(
    expanded = expand,
    onExpandedChange = { expand = !expand },
) {
    OutlinedTextField(
        value = text,
        label = { Text("Options") },
        onValueChange = {
            text = it
        },
        trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expand) },
        modifier = Modifier.menuAnchor(),
    )

    ExposedDropdownMenu(
        expanded = expand,
        onDismissRequest = { expand = false },
    ) {
        listOf("foo", "bar", "baz")
            .filter { it.contains(text) }
            .forEach {
                DropdownMenuItem(
                    text = { Text(it) },
                    onClick = {
                        text = it
                        expand = false
                    }
                )
            }
    }
}

After click the TextField, menu will auto expand. The focus is still on the TextField, it should be able to input, but actually NOT. If I collapse the menu, the TextField will be able to input again.

[losomo]

I'm seeing the same behavior in Android. The keyboard is active, but pressing the keys does not do anything.

[lumkit]

Just set the focus of ExposedDropdownMenuBox to false(in PopupProperties).

[MatkovIvan]

The problem here is that DropdownMenu steals focus. In Material 3 1.3.*, there is a related change: https://android-review.googlesource.com/c/platform/frameworks/support/+/3028145

It adds a parameter to menuAnchor that controls if a dropdown menu is focusable or not. It cannot be just unconditionally changed in the current version because focus is usually required there (for example for keyboard arrows navigation)

[krazzbeluh]

I can confirm I have the same issue with desktop and iOS. Android is working well

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.