OutlinedTextField loses focus in jetpack compose when dropdown is shown

Question

I have the following code:

Box(
    Modifier.fillMaxWidth(),
    contentAlignment = Alignment.Center
) {
    OutlinedTextField(
        value = text,
        onValueChange = {
            text = it
            if (text.length >= 3) {
                viewModel.getSuggestions(text)
            }
        },
        label = { Text("Search") },
        modifier = Modifier.fillMaxWidth(),
        singleLine = true,
        leadingIcon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_search),
                contentDescription = null,
                modifier = Modifier.padding(16.dp, 0.dp, 8.dp, 0.dp),
                tint = Color.Unspecified
            )
        },
        shape = RoundedCornerShape(50)
    )

    DropdownMenu(expanded = suggestions.value.isNotEmpty(),
        modifier = Modifier
            .fillMaxWidth(0.92f),
        onDismissRequest = {  }) {

        for (suggestion in suggestions.value) {
            DropdownMenuItem(onClick = {
                viewModel.searchWord(suggestion)
            }) {
                Text(suggestion)
            }
        }
    }
}

It's a dictionary, on top of the screen there is this OutlinedTextField.

When I search for a word I get suggestions based on the input and show them in a DropdownMenu.

The problem I am facing is that when the DropdownMenu is shown, the keyboard disappears but the focus remains on the Text field. How can I solve this problem and most importantly, why is this happening? I know it's redrawing the UI based on the status change but why it's not keeping the keyboard opened.

Answer 1

DropdownMenu(properties = PopupProperties(focusable = false))

Check this

Answer 2

With M3 1.3.0-beta04 (latest available at time of writing) you should be using ExposedDropdownMenuBox() with an ExposedDropdownMenu(). However, this is not enough to maintain focus on the text field.

The menu anchor must be applied to the text field to indicate if the field should maintain focus or not. .menuAnchor(MenuAnchorType.PrimaryEditable, true)

Here is a functioning ExposedDropdownMenuBox that I am currently using.

@Composable
fun ExposedDropdownTextField(
    modifier: Modifier = Modifier,
    options: List<PlaceDataModel> = listOf(),
    label: String = "Search A Location",
    minQueryLength: Int = 3,
    onValueChange: (String) -> Unit = {_ ->},
    onValueSelected: (PlaceDataModel) -> Unit = {_ ->},
) {
    var expanded by remember { mutableStateOf(false) }
    var searchString by remember { mutableStateOf("") }

    ExposedDropdownMenuBox(
        modifier = modifier,
        expanded = expanded,
        onExpandedChange = { },
    ) {
        OutlinedTextField(
            modifier = Modifier
                .fillMaxWidth()
                .menuAnchor(MenuAnchorType.PrimaryEditable, true),
            readOnly = false,
            maxLines = 1,
            value = searchString,
            onValueChange = {
                searchString = it
                if (it.length >= minQueryLength) {
                    expanded = true
                    onValueChange(it)
                }
            },
            label = { Text(text = label) },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.quantum_ic_search_grey600_24),
                    contentDescription = "",
                )
            }
        )

        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { }) {
            options.forEach { option ->
                DropdownMenuItem(
                    text = { Text(text = option.full) },
                    onClick = {
                        searchString = option.full
                        expanded = false
                        onValueSelected(option)
                    }
                )
            }
        }
    }
}