Click event during scrolling of LazyRow not registered

Question

I have 2 LazyRows and a button. During scrolling of LazyRow A, I can click on the button without a problem, but when I click on a LazyRow A item during scrolling of LazyRow B, no click event is registered.

 Button(modifier = Modifier.size(50.dp), onClick = {
            // reached during scrolling of Lazy Row B
        }) {}
        // Lazy Row A
        LazyRow {
            items(10) {
                Box(modifier = Modifier.size(50.dp).clickable {
                    // not reached during scrolling of Lazy Row B
                })
            }
        }
        // Lazy Row B
        LazyRow {
            items(10) {
                Box(modifier = Modifier.size(50.dp))
            }
        }

Any idea why this happens and how one can override this behaviour?

Answer 1

The following code seems to work fine for me when pasted into a new "Empty Compose" project. The button and both of the LazyRow item sets are clickable and update the message.

@Composable
fun Greeting() {
    Column(modifier = Modifier.fillMaxSize()) {
        var message by remember { mutableStateOf("") }
        Text("message: $message")
        Button(
            modifier = Modifier.size(50.dp),
            onClick = {
                // reached during scrolling of Lazy Row B
                message = "Button clicked"
            }
        ) {}

        // Lazy Row A
        LazyRow {
            items(10) { i ->
                Text(
                    text = i.toString(),
                    modifier = Modifier.size(50.dp).background(Color.Gray)
                        .clickable {
                            // not reached during scrolling of Lazy Row B
                            message = "Row A clicked $i"
                        },
                )
                Spacer(modifier = Modifier.width(2.dp))
            }
        }
        // Lazy Row B
        LazyRow {
            items(10) { i ->
                Text(
                    text = i.toString(),
                    modifier = Modifier.size(50.dp).background(Color.Cyan)
                        .clickable {
                            message = "Row B clicked $i"
                        },
                )
                Spacer(modifier = Modifier.width(2.dp))
            }
        }
    }
}