A modern programming language that makes developers happier.

kotlinlang

TLDR: it’s a bug caused when using `RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp)` with a `Card` where the content is very tall. <https://issuetracker.google.com/issues/372358960>

Original post:

I’ve got a bizarre `FlowRow` bug that crept into my app when updating to compose 1.7 (I think). My `FlowRow` can have potentially hundreds of items (typically 6 items per row on my device) and in terms of layout/display, everything is working perfectly. However, from the 36th row onwards, the `Modifier.clickable` is no longer being called. On further inspection, it’s not the row number that is important, but the height (i.e. reducing the height of each item means more rows are clickable). Each row is about 152px tall. Also, when the last row is not clickable, the following composables in the containing `Column` are also not clickable. What’s going on?

Additional info: the `Column` containing the `FlowRow` is an item in a `LazyColumn`  and all subsequent items in the `LazyColumn` are clickable as normal. So perhaps this points to an issue with tall items in a `LazyColumn`  rather than an issue with `FlowRow` itself.

I found the culprit:
```Card(shape = RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp)) {```
The tall `FlowRow` is wrapped in a `Card`. The problem occurs when the shape is set like above. If I remove that, then there is no problem with the click handling.

So I guess that `RoundedCornerShape` is not happy when it is very tall. I confirmed that there was no issue pre Compose 1.7

```@Composable
fun MyLazyColumn(
    modifier: Modifier = Modifier,
) {
    LazyColumn(modifier = modifier) {
        item {
            Card(shape = RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp)) {
                MyFlowRow()
                Text("Following Item", Modifier.applyClickHandler().padding(16.dp))
            }
        }
        item {
            Text("Final Item", Modifier.applyClickHandler().padding(16.dp))
        }
    }
}

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun MyFlowRow(modifier: Modifier = Modifier) {
    FlowRow(modifier = modifier) {
        for (i in (0..200)) { // maybe need more items on very large screens (in order to see the effect)
            Item(text = i.toString(), Modifier.applyClickHandler())
        }
    }
}

@Composable
fun Modifier.applyClickHandler(): Modifier {
    val context = LocalContext.current
    return this.clickable(onClick = { Toast.makeText(context, "clicked", Toast.LENGTH_SHORT).show() })
}

@Composable
fun Item(text: String, modifier: Modifier = Modifier) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = modifier.size(100.dp)
    ) {
        Text(text = text)
    }
}```