IssueTracker

Jetpack Compose version: BOM 2024.09.02 (Compose 1.7.2 and material 3)

Jetpack Compose component(s) used:

• ExposedDropdownMenuBox
• ExposedDropdownMenu
• DropdownMenuItem
• TextField

Android Studio Build: Build #AI-241.19072.14.2412.12360217, built on September 12, 2024

Kotlin version: 1.9.0

Steps to Reproduce or Code Sample to Reproduce:

I am building an autocomplete pop-up picker based on androidx.compose. material3.samples.EditableExposedDropdownMenuSample sample. When the user types something that starts with @ the ExposedDropdownMenuBox expands offering options according to the text entered after the @. I've observed an issue with the focus:

• If the user manually taps the TextField, everything works as expected.
• If the user starts typing using the keyboard, meaning that the user do not tap on the TextField, every time the ExposedDropdownMenuBox expands captures the focus and the user is no longer able to continue typing.

1. Using the attached code.
2. Open the app
3. See how the TextField receives the focus, and the cursor blinks.
4. Start typing using the keyboard. Type @.
5. See how they ExposedDropdownMenuBox expands.
6. Type any key, see how the focus moves to the ExposedDropdownMenuBox being impossible to continue introducing text in the 'TextField'.
7. Select one option.
8. See how it is impossible to keep typing.
9. Click on the text and try to delete a character.
10. See how the focus moves back to the ExposedDropdownMenuBox

I also have identified that strange things happen if for any reason the ExposedDropdownMenuBox expands using a dedicated button.

This might be related to: https://issuetracker.google.com/issues/369237326

Sample code:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AutoCompleteExampleScreen(){
    Scaffold(modifier = Modifier.fillMaxSize()) { _ ->
        var textFieldState by remember { mutableStateOf(TextFieldValue()) }
        val options = listOf("Cupcake", "Donut", "Eclair", "Froyo", "Gingerbread")
        
        var isExpanded by remember(textFieldState.text) {
            mutableStateOf(textFieldState.text.startsWith("@"))
        }

        val query = textFieldState.text.removePrefix("@")
        val filteredOptions = options.filter { it.contains(query, ignoreCase = true) }

        ExposedDropdownMenuBox(
            expanded = isExpanded,
            onExpandedChange = { Unit },
        ) {
            TextField(
                modifier = Modifier
                    .menuAnchor(MenuAnchorType.PrimaryEditable),
                value = textFieldState,
                onValueChange = { newString ->
                    textFieldState = textFieldState.copy(
                        text = newString.text,
                        selection = TextRange(newString.text.length)
                    )
                },
            )

            ExposedDropdownMenu(
                expanded = isExpanded,
                onDismissRequest = { isExpanded = false },
            ) {
                filteredOptions.forEach { option ->
                    DropdownMenuItem(
                        text = {
                            Text(option)
                        },
                        onClick = {
                            val newText = textFieldState.text + "$option "
                            textFieldState = textFieldState.copy(
                                text = newText,
                                selection = TextRange(newText.length - 1)
                            )
                            isExpanded = false
                        }
                    )
                }
            }
        }
    }
}