compose-menu icon indicating copy to clipboard operation
compose-menu copied to clipboard

Scrollbars Thumb HideWhileIdle hides while scrolling

Open Ashkan-san opened this issue 4 months ago • 2 comments

Hey, when you directly use the thumb in the Scrollbar to scroll while using HideWhileIdle the thumb disappears even though I'm still scrolling the list with the thumb. This doesnt happen when scrolling the list normally. I think this is a bug.

Ashkan-san avatar Aug 22 '25 09:08 Ashkan-san

Could you kindly provide a minimum reproducible code so that I can look into this faster for you?

alexstyl avatar Aug 24 '25 04:08 alexstyl

This is a dumbed down version of my implementation. It has the same problem.

@Composable
fun GenericGridWithScrollbar(
    modifier: Modifier = Modifier,
    items: List<String> = List(50) { "Item ${it + 1}" }, // Sample data
    columns: Int = 3,
    onClickItem: (String) -> Unit = { println("Clicked: $it") },
) {
    val gridState = rememberLazyGridState()
    val scrollState = rememberScrollAreaState(gridState)

    ScrollArea(state = scrollState) {
        LazyVerticalGrid(
            modifier = modifier,
            columns = GridCells.Fixed(columns),
            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            state = gridState,
        ) {
            itemsIndexed(items) { index, item ->
                Card(
                    modifier = Modifier
                        .aspectRatio(1f)
                        .clickable { onClickItem(item) },
                    colors = CardDefaults.cardColors(
                        containerColor = MaterialTheme.colorScheme.primaryContainer
                    )
                ) {
                    Box(
                        modifier = Modifier.fillMaxSize(),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(
                            text = item,
                            style = MaterialTheme.typography.bodyMedium,
                            textAlign = TextAlign.Center
                        )
                    }
                }
            }
        }
        
        VerticalScrollbar(
            modifier = Modifier
                .align(Alignment.TopEnd)
                .fillMaxHeight()
                .width(12.dp)
        ) {
            Thumb(
                modifier = Modifier.background(
                    MaterialTheme.colorScheme.surfaceVariant.copy(0.6f), 
                    RoundedCornerShape(100)
                ),
                thumbVisibility = ThumbVisibility.HideWhileIdle(
                    enter = fadeIn(),
                    exit = fadeOut(),
                    hideDelay = 2.0.seconds
                )
            )
        }
    }
}

Ashkan-san avatar Aug 24 '25 18:08 Ashkan-san