A modern programming language that makes developers happier.

kotlinlang

Im trying to create a text field with a drop down menu for most common inputs so the user can enter the input manually in the text field or simply click one of the options from the dropdown menu to enter it into the text field, i found the <https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ExposedDropdownMenuBox(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)|ExposedDropdownMenuBox> composable in the docs and it seems like a good solution for what i need but when i try to run my app i can't type anything in the textfield when the menu is visible (even tho the text field has focus and i can see the blinking indicator) and i have to click the text field again to hide the menu and only then i can start typing in the text field, but not when the menu is visible. does anyone know a way to allow typing while the menu is visible?

Here is the code im trying:
```import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
var expanded by remember { mutableStateOf(false) }
var selectedOptionText by remember { mutableStateOf("") }
ExposedDropdownMenuBox(
    expanded = expanded,
    onExpandedChange = { expanded = it },
) {
    TextField(
        // The `menuAnchor` modifier must be passed to the text field for correctness.
        modifier = Modifier.menuAnchor(),
        value = selectedOptionText,
        onValueChange = { selectedOptionText = it },
        label = { Text("Label") },
        trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
        colors = ExposedDropdownMenuDefaults.textFieldColors(),
    )
    // filter options based on text field value
    val filteringOptions = options.filter { it.contains(selectedOptionText, ignoreCase = true) }
    if (filteringOptions.isNotEmpty()) {
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
        ) {
            filteringOptions.forEach { selectionOption -&gt;
                DropdownMenuItem(
                    text = { Text(selectionOption) },
                    onClick = {
                        selectedOptionText = selectionOption
                        expanded = false
                    },
                    contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
                )
            }
        }
    }
}```


I’m not sure whether it’s a bug, but you can work around it by using
```    DropdownMenu(
        expanded = expanded,
        onDismissRequest = onDismissRequest,
        modifier = modifier.exposedDropdownSize(),
        properties = PopupProperties(
            focusable = false
        ),        
    ) {
        // Your content
    }```


Can you test how it behaves in Android? If it’s the same as on the desktop, please submit a bug in Google’s Jetpack Compose bug tracker. If it’s different, please submit a bug in Compose Multiplatform bug tracker.

Thanks for the guidance and the workaround!, I found some existing issues in the google issue tracker some are having the same unexpected behaviour as i had.

suprisingly in compose multiplatform the ExposedDropdownMenuBox is behaving as per documentation in iOS target only