I have a half-transparent Box with `Modifier.fillMaxSize()` as overlay on top of the screen, but I s...

# compose

[Lukasz Kalnik]

I have a half-transparent Box with Modifier.fillMaxSize() as overlay on top of the screen, but I see that the Buttons underneath are still clickable. How can I "catch" the click events in the Box and not let them be propagated to items underneath?

[swanti]

Make the Box clickable. Just remember to change the interactionSource so that it doesn't look like you are clicking

[Lukasz Kalnik]

Thank you!

[Stylianos Gakis]

Notice what Surface does https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Surface.kt;l=126?q=Material3.Surface which is mentioned in point #5 in the docs above it.
You probably want to do that same instead of clickable. Looks a bit more lightweight and I am guessing it is internally too.

[Lukasz Kalnik]

Thanks, that looks indeed more concise.

[Lukasz Kalnik]

However somehow the clicks are still going through the Box... I have a bit complex Composable setup, I will try to create a minimal reproducer.

[Stylianos Gakis]

Yeah, if surface itself works this way, I can't imagine this not being the way to go.

[Dmitriy Gaiduk]

fun Modifier.disableClicks() = composed {
  this.clickable(
    interactionSource = remember { MutableInteractionSource() },
    indication = null,
    onClick = {}
  )
}