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
()
)