Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A quick and dirty way to do AutoCompleteTextViews in Jetpack Compose. Needs improvement in the UX (hide cursor when item selected) and nicer API and probably more.
var selectedOptionText by remember { mutableStateOf("") }
val options = listOf("Cupcake", "Donut", "Eclair", "Froyo", "Gingerbread")
val filtered = options
.filter { it.lowercase().contains(selectedOptionText.lowercase()) }
val expanded = selectedOptionText.isNotEmpty() && filtered.isNotEmpty()
&& options.none { it.lowercase() == selectedOptionText.lowercase() }
ExposedDropdownMenuBox(
expanded = expanded,
onExpandedChange = {}
) {
TextField(
value = selectedOptionText,
onValueChange = {
selectedOptionText = it
},
colors = ExposedDropdownMenuDefaults.textFieldColors()
)
ExposedDropdownMenu(
expanded = expanded,
onDismissRequest = {}
) {
filtered.forEach { selectionOption ->
DropdownMenuItem(
onClick = {
selectedOptionText = selectionOption
}
) {
Text(text = selectionOption)
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment