Jetpack Compose ExposedDropdownMenu always going up

1.2k views Asked by At

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
                })
            }
        }
    }
}
0

There are 0 answers