Jetpack Compose & Material 3 - How do I get Exposed Dropdown Menu Items to display correctly above a Bottom Sheet?

Question

Exposed Dropdown Menu Items Behind Bottom Sheet (Jetpack Compose & Material 3)

I'm working on an application for Android using Jetpack Compose, Material 3 and Kotlin. In this application I want to have a bottom sheet where I can create a new case. This case contains a title, deadline, case group and case description. The case group only has 4 options that I want to display in a exposed dropdown menu.

It displays the text field input on top of the bottom sheet but the menu items are falling behind the bottom sheet. I used the code straight from the website linked in the above text for the dropdown.

The outcome I want to achieve is to display the options above the bottom sheet so a user can pick an options.

I have already tried using Modifier.zIndex() but with not success.

Does anyone know how to fix this?

Image: Dropdown falling behind bottom sheet

Bottom sheet code:

            ModalBottomSheet(
                onDismissRequest = { showBottomSheet = false },
                sheetState = sheetState,
                tonalElevation = 1.dp
            ) {
                Column(modifier = Modifier.padding(16.dp)) {

                    TopAppBar(
                        title = {
                            Text(
                                text = "New Case",
                                style = MaterialTheme.typography.titleLarge,
                            )
                        },

                        actions = {
                            TextButton(onClick = {
                                scope.launch { sheetState.hide() }.invokeOnCompletion {
                                    if (!sheetState.isVisible) {
                                        showBottomSheet = false
                                    }
                                }
                            }) {
                                Text(
                                    text = "Add",
                                    style = MaterialTheme.typography.titleMedium,
                                )
                            }
                        },

                        modifier = Modifier.fillMaxWidth()
                    )

                    //Title
                    TitleTF()

                    Spacer(modifier = Modifier.height(16.dp))

                    //Deadline
                    DeadLineTF()

                    Spacer(modifier = Modifier.height(16.dp))

                    //Project dropdown
                    ProjectDropdown()

                    Spacer(modifier = Modifier.height(16.dp))

                    //Case description
                    CaseDescriptionTF()

                    Spacer(modifier = Modifier.height(16.dp))

                }
            }

Exposed dropdown code:

 val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
    var expanded by remember { mutableStateOf(false) }
    var selectedOptionText by remember { mutableStateOf(options[0]) }

    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = { expanded = !expanded },
    ) {
        OutlinedTextField(
            modifier = Modifier.menuAnchor(),
            readOnly = true,
            value = selectedOptionText,
            onValueChange = {},
            label = { Text("Label") },
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
            colors = ExposedDropdownMenuDefaults.textFieldColors(),
        )
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
        ) {
            options.forEach { selectionOption ->
                DropdownMenuItem(
                    text = { Text(selectionOption) },
                    onClick = {
                        selectedOptionText = selectionOption
                        expanded = false
                    },
                    contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
                )
            }
        }
    }

Answer 1

Seems like this is no longer an issue in androidx.compose.material3:material3:1.2.0-alpha09. I was using an older version of androidx.compose.material3 and after bumping it to 1.2.0-alpha09 I am no longer seeing the issue.