ReorderableRow that contains a nested ReorderableColumn with Modifier.weight

[jasonhejd]

Hello, I encountered a bug when using a ReorderableRow that contains a nested ReorderableColumn with Modifier.weight.
When I reorder two items inside the ReorderableColumn and then tap the “Done” button, the items inside the ReorderableColumn behave incorrectly.
The library version I'm using is 3.0.0.

    var list by remember {
        mutableStateOf(
            listOf(
                CardItem.BigCard(1, items[0]),
                CardItem.BigCard(2, items[1]),
                CardItem.ColumnCard(3, listOf(items[2], items[3])),
            )
        )
    }

    var isEditable by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier.fillMaxWidth()
            .height(400.dp)
    ) {
        if (isEditable) {
            Button(
                onClick = {
                    isEditable = false
                }
            ) {
                Text(text = "Done")
            }
        }

        ReorderableRow(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            list = list,
            onSettle = { fromIndex, toIndex ->
            },
            horizontalArrangement = Arrangement.spacedBy(8.dp),
        ) { index, item, _ ->
            key(item.id) {
                if (item is CardItem.BigCard) {
                    ReorderableItem(Modifier.weight(1f)) {
                        Card(
                            modifier = Modifier.fillMaxSize()
                                .longPressDraggableHandle(
                                    onDragStarted = {
                                        isEditable = true
                                    },
                                    onDragStopped = {
                                    },
                                ),
                        ) {
                            Text(text = item.item.text)
                        }
                    }
                } else if (item is CardItem.ColumnCard) {
                    ReorderableItem(Modifier.weight(1f)) {

                        ReorderableColumn(
                            list = item.items,
                            onSettle = { fromIndex, toIndex ->

                            },
                            verticalArrangement = Arrangement.spacedBy(8.dp),
                            modifier = Modifier.fillMaxSize(),
                        ) { index, columnItem, isDragging ->
                            key(columnItem.id) {
                                ReorderableItem(Modifier.weight(1f)) {
                                    Card(
                                        modifier = Modifier.fillMaxSize()
                                            .longPressDraggableHandle(
                                                onDragStarted = {
                                                    isEditable = true
                                                },
                                                onDragStopped = {
                                                },
                                            ),
                                    ) {
                                        Text(text = columnItem.text)
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

Screenrecorder-2025-11-17-13-57-32-239.mp4

[jasonhejd]

I tried using a fixed height instead of Modifier.weight, but the result was the same.

[jasonhejd]

I found that even with version 2.5.1 of the library, using a fixed height in the same layout still causes misalignment once the height of the items in the third column exceeds a certain value. If the height is below that threshold, everything works fine.

[jasonhejd]

I found another way to fix this issue and look forward to any updates.

key(isEditable) {
    ReorderableItem(
        modifier = Modifier.weight(1f)
    ) {
        ReorderableColumn(
            list = item.items,
            onSettle = { fromIndex, toIndex ->
                item.items = item.items.toMutableList().apply {
                    add(toIndex, removeAt(fromIndex))
                }
            },
            verticalArrangement = Arrangement.spacedBy(8.dp),
            modifier = Modifier.fillMaxHeight()
        ) { index, columnItem, isDragging ->
            ...
        }
    }
}