Jetpack Compose ExposedDropdownMenu has Incorrect Hierarchy and Behaviour

Posted by dan_mal@reddit | learnprogramming | View on Reddit | 0 comments

ExposedDropdownMenu is called from inside a DropdownMenu, but is rendered behind the parent DropdownMenu and divorced from the TextField it is anchored to.
In the Layout Inspector, the ExposedDropdownMenu is not nested in its ExposedDropdownMenuBox and the DropdownMenu,cbut is on the same level of the hierarchy as the DropdownMenu.
What am I doing wrong?
Can an ExposedDropDownMenu not be called from a DropDownMenu?

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("nstlqify") },
            colors = TopAppBarDefaults.topAppBarColors(
                containerColor = MaterialTheme.colorScheme.primary,
                titleContentColor = MaterialTheme.colorScheme.onPrimary
            ),
            scrollBehavior = scrollBehavior,
            actions = {
                IconButton(onClick = {
                    showMenu = !showMenu
                }) {
                    Icon(
                        imageVector = Icons.Default.
Settings
,
                        contentDescription = "Settings",
                        tint = MaterialTheme.colorScheme.onPrimary
                    )
                }
                DropdownMenu(
                    expanded = showMenu,
                    onDismissRequest = { showMenu = false }
                ) {
                    ExposedDropdownMenuBox(
                        expanded = showFontSelection,
                        onExpandedChange = {
                            showFontSelection = !showFontSelection
                        },
                        modifier = Modifier.
padding
(horizontal = 16.
dp
)
                    ) {
                        TextField(
                            readOnly = true,
                            value = selectedFontName,
                            onValueChange = {},
                            label = { Text("Choose Font") },
                            //trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = showFontSelection) },
                            modifier = Modifier.
menuAnchor
()

                        )

                        ExposedDropdownMenu(
                            expanded = showFontSelection,
                            onDismissRequest = {
                                showFontSelection = false
                            },
                            modifier = Modifier.
zIndex
(5f)
                        ) {
                            DropdownMenuItem(
                                text = { Text("JNN Regular") },
                                onClick = {
                                    //do stuff
                                    showFontSelection = false
                                }
                            )
                            DropdownMenuItem(
                                text = { Text("JNN Kasheeda") },
                                onClick = {
                                    //do sruff
                                    showFontSelection = false
                                }
                            )

                        }
                    }
                    Box {
                        Row {
                            Text(text = "Font SIze")
                            IconButton(onClick = {
                                fontSizeUpdated += 1
                            }) {
                                Icon(
                                    imageVector = Icons.Default.
KeyboardArrowUp
,
                                    contentDescription = "Increase",
                                    tint = MaterialTheme.colorScheme.onPrimary
                                )
                            }
                            Text(text = fontSizeUpdated.toString())
                            IconButton(onClick = {
                                fontSizeUpdated -= 1
                            }) {
                                Icon(
                                    imageVector = Icons.Default.
KeyboardArrowDown
,
                                    contentDescription = "Decrease",
                                    tint = MaterialTheme.colorScheme.onPrimary
                                )
                            }
                        }
                    }
                }
            }
        )
    },
    modifier = Modifier.
fillMaxSize
()
)