Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to dismiss an expanded drop down menu that is not focusable when clicking the button that normally expands it

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)
    )
}
like image 749
mpellegr Avatar asked Oct 11 '25 23:10

mpellegr


2 Answers

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)
       )
   }
like image 113
mpellegr Avatar answered Oct 15 '25 23:10

mpellegr


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.

like image 31
Philip Dukhov Avatar answered Oct 16 '25 00:10

Philip Dukhov



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!