If there’s some clickable element in front of scrolling container, it seems like this element interc...

# compose

[Alexander Sitnikov]

If there’s some clickable element in front of scrolling container, it seems like this element intercepts touch events, and container doesn’t scroll. Is there workaround for this behaviour? Code and video in 🧵

[Alexander Sitnikov]

Scaffold(
    modifier = Modifier.fillMaxSize(),
    floatingActionButton = {
        FloatingActionButton(onClick = { /*TODO*/ }) {
            Icon(Icons.Default.Phone, contentDescription = null)
        }
    }
) {
    LazyColumn(Modifier.fillMaxSize()) {
        items((1..100).toList()) { item ->
            ListItem {
                Text("Item #$item")
            }
        }
    }
}

[Alexander Sitnikov]

Screen Recording 2021-08-08 at 19.20.36.mov

[Alexander Sitnikov]

Same without material:

Box(Modifier.fillMaxSize()) {
    Column(Modifier.verticalScroll(rememberScrollState())) {
        for (item in 1..100) {
            Text("Item #$item", Modifier.fillMaxSize())
        }
    }
    Box(
        Modifier
            .align(Alignment.Center)
            .size(20.dp)
            .background(Color.Magenta)
            .clickable { }
    )
}

[nglauber]

My understanding is: the component closer to the user will intercept the event… 🤷‍♂️
The FAB, for instance, has an elevation brings it in front of the list (closer to user in the Z axis).
Regarding the Box, the last element is the one in front of the others, following the same logic I mentioned.