Why does my button (which is not showing, since the entire screen is red) react to touches? Is there...

# compose

[Colton Idle]

Why does my button (which is not showing, since the entire screen is red) react to touches? Is there a way to prevent it? This is a simple example but I have more complex screens where I have some inner "screens" that overlap each other but the fact that clicks get passed through is kinda messing some things up for me.

fun MyScreen(
) {
  val context = LocalContext.current
  Box(Modifier.fillMaxSize().background(Color.Green), contentAlignment = Center) {
    Button(onClick = { Toast.makeText(context, "screen in background clicked", Toast.LENGTH_SHORT).show() }) {
      Text(text = "Bottom")
    }
  }
  Box(Modifier.fillMaxSize().background(Color.Red)) {}
}

[Joseph Hawkes-Cates]

huh, I wouldn’t expect that behavior either, but haven’t tried it out in our project. Does it behave the same way if you use a Column or a Row instead of a Box to cover the button?

[myanmarking]

because it is the same with views. Your red rectangle does not handle touch event, so the event does pass thru. It is expected

[Colton Idle]

Interesting. So I guess the way to get around this is to have a dummy unhandled clickable? If so... I wonder if I can just make a custom modifier for that.

Box(
  Modifier
    .fillMaxSize()
    .background(Color.Red)
    .clickable(interactionSource = MutableInteractionSource(), indication = null, onClick = {})) {}

[myanmarking]

could be, but then it would only handle clicks. All other touches would have the same problem

[Colton Idle]

Oh true. Like scrolls on the green box would still happen. Hm. I wonder if there's any out of the box way to just stop passing events through.

[myanmarking]

yes, modifier:

.pointerInput(Unit) {}

[lhwdev]

Or, maybe Surface?

[Colton Idle]

ooh. interesting idea. ill give that a try as well.

[Colton Idle]

surface also worked! Thanks!