https://kotlinlang.org logo
#compose
Title
# compose
c

Christoph Wiesner

03/28/2023, 8:24 AM
Auto-complete TextInput. Tried to use the sample in the docs for implementing a auto-complete text input. Changed it to trigger the popup when the text value is in the suggestion list - problem is that as soon as the popup is displayed it takes away the focus from the text input. (although i'm using
menuAnchor()
which should actually handle that afaik) Has anyone overcome that problem?
this is the code that i'm running - bascially the sample code with the added trigger of the poup
Copy code
val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
var exp by remember { mutableStateOf(false) }
var selectedOption by remember { mutableStateOf("") }
ExposedDropdownMenuBox(expanded = exp, onExpandedChange = { exp = !exp }) {
    TextField(
        value = selectedOption,
        onValueChange = { selectedOption = it
            if (options.any { it.contains(selectedOption, ignoreCase = true) })
                       exp = true },
        label = { Text("Label") },
        modifier = Modifier.menuAnchor()
    )
    // filter options based on text field value (i.e. crude autocomplete)
    val filterOpts = options.filter { it.contains(selectedOption, ignoreCase = true) }
    if (filterOpts.isNotEmpty()) {
        ExposedDropdownMenu(expanded = exp, onDismissRequest = { exp = false }) {
            filterOpts.forEach { option ->
                DropdownMenuItem(
                    onClick = {
                        selectedOption = option
                        exp = false
                    },
                    text = { Text(text = option) }
                )
            }
        }
    }
}
7 Views