I have a button to expand a drop down menu in my Composable. I set my drop down menu to not take focus using PopupProperties(focusable = false) (I have to do this so the keyboard does not get dismissed when expanding the drop down menu). Now I have an issue where clicking the expand button to show menu when the menu is already expanded causes two recompositions, resulting in the menu still being expanded and not dismissed as expected. The first recomposition, it dismisses the menu and sets my rememebered value for expanded to false. Then when the button's onClick lambda is called, expanded gets set back to true, causing a second recomposition that expands the menu again. How do I allow dismissing the menu by clicking the expand button if it is already expanded?
var expanded by remember { mutableStateOf(false) }
Box() {
IconButton(onClick = { expanded = true })
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
properties = PopupProperties(focusable = false)
)
}
The only solution I could find is a hacky work around to use a 100 milliseconds delay before reacting to a click on the button. Works well for the most part but really quick taps will appear to "do nothing".
var dismissedTimeMillis by remember { mutableStateOf<Long?>(null) }
var expanded by remember { mutableStateOf(false) }
Box() {
IconButton(onClick =
dismissedTimeMillis.let {
if (it == null || (System.currentTimeMillis() - it) > 100L) {
expanded = true
}
})
DropdownMenu(
expanded = expanded,
onDismissRequest = {
expanded = false
dismissedTimeMillis = System.currentTimeMillis()
},
properties = PopupProperties(focusable = false)
)
}
It looks like a bug, since according to the documentation, focusable should only control "IME events and key presses".
So delay workaround should work until it's fixed.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With