FocusRequester is not initialized with ExposedDropdownMenuBox in M3

Question

After updating the build gradle to compose_version 1.4.2 and 'androidx.compose.material3:material3:1.0.1'. I get the following error.

FocusRequester is not initialized. Here are some possible fixes:

1. Remember the FocusRequester: val focusRequester = remember { FocusRequester() }
2. Did you forget to add a Modifier.focusRequester() ?
3. Are you attempting to request focus during composition? Focus requests should be made in response to some event. Eg Modifier.clickable { focusRequester.requestFocus() }

This code was working before the update.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun EditLocationsScreen(
    navController: NavHostController,
    casinoViewModel: CasinoViewModel
) {

    Scaffold(
        topBar = { LocationTopBar(navController = navController)}   )
    { paddingValues ->
        Spacer(modifier = Modifier.height(10.dp))
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
        ) {
            var expanded by remember { mutableStateOf(false) }
            val casinoNames by casinoViewModel.casinoNames.collectAsState(emptyList())
            var name by remember { mutableStateOf("") }
            val focusRequester = remember { FocusRequester() }
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 10.dp),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Text(
                    text = "Name",
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier
                        .padding(10.dp)
                        .align(Alignment.CenterVertically)
                )
                ExposedDropdownMenuBox(
                    expanded = expanded,
                    onExpandedChange = { expanded = !expanded },
                    modifier = Modifier
                        .weight(1f)
                        .padding(horizontal = 10.dp)
                ) {
                    OutlinedTextField(
                        label = { Text(text = "Enter Location") },
                        value = name,
                        onValueChange = { name = it },
                        modifier = Modifier
                            .padding(10.dp)
                            .align(Alignment.CenterVertically)
                            .focusRequester(focusRequester)
                    )

                    ExposedDropdownMenu(
                        expanded = expanded,
                        onDismissRequest = { expanded = false }
                    ) {
                        casinoNames.forEach { casino ->
                            DropdownMenuItem(
                                onClick = {
                                    expanded = false
                                    name = casino.name
                                },
                                text = { Text(text = casino.name) }
                            )
                        }
                    }
                }
            }
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 10.dp),
            ) {
                Button(
                    onClick = {
                        expanded = true
                        casinoViewModel.insertCasino(name, casinoNames)
                        name = ""
                    },
                    modifier = Modifier
                        .padding(10.dp)
                        .weight(1f)
                ) {
                    Text(text = "Add new Casino")
                }
                Button(
                    onClick = {
                        expanded = true
                        casinoViewModel.removeCasino(name, casinoNames)
                        name = ""
                    },
                    modifier = Modifier
                        .padding(10.dp)
                        .weight(1f)
                ) {
                    Text(text = "Delete Casino")
                }
            }
        }

    }
}

I added the focusRequester and the modifier but still get the same error. What else is needed? It crashes when I click on the add button.

Answer 1

In M3, you need to pass Modifier.menuAnchor() to your text field when using ExposedDropdownMenuBox. From documentation:

The TextField within content should be passed the ExposedDropdownMenuBoxScope.menuAnchor modifier for proper menu behavior.

ExposedDropdownMenuBox(
    expanded = expanded,
    onExpandedChange = { expanded = !expanded },
) {
    OutlinedTextField(
        value = name,
        onValueChange = { name = it },
        modifier = Modifier
            .menuAnchor()
    )

    ExposedDropdownMenu(
        //...
}