Repository: JetBrains/compose-multiplatform

Issue #4782: TextField cannot input in ExposedDropdownMenuBox, when ExposedDropdownMenu is expanded
Created: 2024-05-08T16:52:17Z
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.

Duplicate issue #5033: Keyboard not opening in iOS When using ExposedDropdownMenu
Created: 2024-06-27T14:25:04Z
Describe the bug
Keyboard not opening in iOS When using ExposedDropdownMenu
Affected platforms

iOS

Versions

Libraries:

Compose Multiplatform version: 1.6.10


Kotlin version: 2.0.0

To Reproduce
Steps to reproduce the behavior:

Run this code snippet:
Box(
  modifier = Modifier.fillMaxSize(),
  contentAlignment = Alignment.Center
) {
    val options = remember { (0..5).map { "Test $it" } }
    var text by remember { mutableStateOf("") }
    var isExpanded by remember { mutableStateOf(false) }

    ExposedDropdownMenuBox(
        expanded = isExpanded,
        onExpandedChange = { isExpanded = it }
    ) {
        OutlinedTextField(
            value = text,
            onValueChange = { text = it },
            modifier = Modifier.fillMaxWidth().menuAnchor(),
            trailingIcon = {
                IconButton(onClick = { isExpanded = !isExpanded }) {
                    ExposedDropdownMenuDefaults.TrailingIcon(isExpanded)
                }
            }
        )

        ExposedDropdownMenu(
            expanded = isExpanded,
            onDismissRequest = { isExpanded = false },
            modifier = Modifier.fillMaxWidth()
        ) {
            options.forEach { item ->
                DropdownMenuItem(
                    onClick = { text = item; isExpanded = false },
                    modifier = Modifier.fillMaxWidth(),
                    text = { Text(text = item) },
                )
            }
        }
    }
}

Click on The TextField
Keyboard wont open

Expected behavior
Keyboard should be opening
Recording

  
    
    

    593C2001-28B7-4489-BE6C-711F0BB85067.mp4

Closing comment (2024-06-27T15:48:00Z): Duplicate of #4782
Should be fixed in JetBrains/compose-multiplatform-core#1423
It will require a new parameter in menuAnchor to work correctly