How to stop Surface from passing through clicks

Question

I have a FAB that when clicked expands upwards to show multiple options. I am trying to add an overlay so that the screen has a slightly darker tint to focus on the FAB when expanded. Overlay and transparency work fine; however, clicks all pass through the surface to click the buttons on display which means that I can't use those clicks to collapse the FAB.

As a minimal example, I want the amount to increase by ten even when I directly click the Button.

Here's the code for the example above:

MaterialTheme {
    var amount by remember { mutableStateOf(0) }

    Surface(
        modifier = Modifier.fillMaxSize(),
        onClick = { amount += 10 }
    ) {
        Box(
            modifier = Modifier
                .height(20.dp)
                .width(50.dp)
        ) {
            Button(onClick = { amount += 1 }) {
                Text(text = "Amount: $amount")
            }
        }
    }
}

If that's not possible, I'd love any ideas on how to make the FAB collapse when clicked outside.

You mean that you wanna touches to pass though the button as if it was not a button but a simple text? If so, check out [this answer](https://stackoverflow.com/questions/68877700/how-can-i-detect-a-click-with-the-view-behind-a-jetpack-compose-button/68878910#68878910) — Phil Dukhov, Feb 10 '22 at 02:43

How to stop Surface from passing through clicks

0 Answers0