It seems like click event being sent to elements even if there’re some other elements laying on top ...

# compose

[Tin Tran]

It seems like click event being sent to elements even if there’re some other elements laying on top of them. Is this expected behavior? Sample code in 🧵

[Tin Tran]

@Composable
@Preview
fun Test() {
    var showLoading by remember { mutableStateOf(true) }
    Box(
        modifier = Modifier.fillMaxSize().background(Color.White)
    ) {
        Button(onClick = {showLoading = !showLoading}) {
            Text(text = "Show loading")
        }
        if (showLoading) {
            Box(modifier = Modifier.fillMaxSize().background(Color(0x33000000))) {
                CircularProgressIndicator(
                    color = Color.White,
                    strokeWidth = 2.dp,
                    modifier = Modifier
                        .align(Alignment.Center)
                )
            }
        }
    }
}

[Albert Chang]

Touch events propagate as long as they are not consumed. If they do not, how does a list detect scrolls when there are children on top of it?

[Albert Chang]

If you want to block touch events, you can use a Surface instead of a Box.

[Tin Tran]

Ok got it! Thanks Albert! So either use a Surface or consume the touch event myself with Modifier.pointerInput(Unit) { detectTapGestures { } }