OutlinedTextField loses focus in jetpack compose when dropdown is shown

Viewed 358

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.

1 Answers
DropdownMenu(properties = PopupProperties(focusable = false))

Check this

Related