【compose-web】TextField cannot input in ExposedDropdownMenuBox, when ExposedDropdownMenu is expanded

[JasonMing]

• 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.

Is this a bug of Compose Web or I miss some key config?

[losomo]

I can see the same issue in Android, filed a bug in #4782

[losomo]

I've had some limited success with trying

TextField(
                modifier = Modifier.menuAnchor().focusable()

but it requires an extra tap from the user.