2

I'm trying to implement ExposedDropdownMenu - which I want to be displayed underneath TextField - when I set height of dropdown to max. 20 dp then everything is okay. But for any greater value it is always displayed above. Do you know what could be the issue here?

How it looks like:

enter image description here

My code:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TextFieldWithDropdown(
    modifier: Modifier = Modifier,
    textFieldState: TextFieldState,
    textCallback: (String) -> Unit,
    list: List<String>,
    keyboardOptions: KeyboardOptions,
    textStyle: TextStyle
) {
//        .align(Alignment.CenterStart)

    val dropDownOptions = remember { mutableStateOf(listOf<String>()) }
    val textFieldValue = remember { mutableStateOf(TextFieldValue()) }
    val dropDownExpanded = remember { mutableStateOf(false) }

    ExposedDropdownMenuBox(
        modifier = modifier,
        expanded = dropDownExpanded.value, onExpandedChange = {
            dropDownExpanded.value = !dropDownExpanded.value
        }) {
        TextField(
            modifier = Modifier
                .menuAnchor()
                .fillMaxWidth()
                .onFocusChanged { focusState ->
                    if (!focusState.isFocused)
                        dropDownExpanded.value = false
                },
            value = textFieldState.text.value,
            onValueChange = {
                textFieldState.text.value = it
                textCallback.invoke(it)
                dropDownOptions.value =
                    list.filter { it.startsWith(textFieldState.text.value) && it != textFieldState.text.value }
                        .take(3)
                dropDownExpanded.value = dropDownOptions.value.isNotEmpty()
            },
            singleLine = true,
            maxLines = 1,
            textStyle = textStyle,
        )
        ExposedDropdownMenu(
            expanded = dropDownExpanded.value,
            onDismissRequest = {
                dropDownExpanded.value = false
            },
        ) {
            dropDownOptions.value.forEach { text ->
                DropdownMenuItem(text = {
                    Text(text = text)
                }, onClick = {
                    textFieldState.text.value = text
                    dropDownExpanded.value = false
                })
            }
        }
    }
}
voximdo
  • 53
  • 2
  • 14
  • I copied your code as I'm trying to implement an Autocomplete text field myself. I guess Compose now includes an `Autofill` component but I can't find anyone actually using it or any articles explaining it and I'm too dumb to know how to implement it myself so I'm using the `ExposedDropdownMenu` instead. Anyway, your code works, but for some reason I can't type anything in the `TextField` with my physical keyboard. If I click the software keyboard in the emulator it'll write characters though. No idea why. – clamum May 13 '23 at 09:26

0 Answers0