Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextField cannot input in ExposedDropdownMenuBox, when ExposedDropdownMenu is expanded #4782

Open
losomo opened this issue May 8, 2024 Discussed in #4693 · 4 comments
Open

Comments

@losomo
Copy link

losomo commented May 8, 2024

Discussed in #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
                    }
                )
            }
    }
}
image

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
Copy link
Author

losomo commented May 8, 2024

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

@lumkit
Copy link

lumkit commented May 9, 2024

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

@MatkovIvan
Copy link
Member

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants