Scrollable dropdown

[subchannel13]

Hi! How to make the list of options in the dropdown panel scrollable? I've tried to wrap DropdownMenuPanel with ScrollArea but scrollbar would leak out, be visible when panel is collapsed and push options down when expanded...

[alexstyl]

You can make the contents scrollable in any way you normally do in Compose. (ie Modifier.scrollable(), lazy lists, etc)

Share the code you tried and I can help you out further.

[subchannel13]

Eh, I've deleted the attempt before committing the code. Here is the composable without scrolling:

@Composable
fun <T> ComboBox(
    items: List<T>,
    selectedIndex: MutableState<Int>,
    buttonModifier: Modifier = Modifier.height(buttonSize),
    strict: Boolean = true,
    display: (T) -> String
) {
    var expanded by remember { mutableStateOf(false) }

    DropdownMenu(onExpandRequest = { expanded = true }) {
        ButtonWindows(
            modifier = buttonModifier,
            contentPadding = PaddingValues(8.dp, 0.dp),
            onClick = { expanded = true }
        ) {
            Text(if (strict || selectedIndex.value in items.indices) display(items[selectedIndex.value]) else "")
            Icon(
                modifier = Modifier.fillMaxHeight(0.75f).padding(start = 4.dp),
                painter = painterResource(Res.drawable.dropdown_arrow),
                contentDescription = null,
            )
        }

        //TODO make scrollable
        DropdownMenuPanel(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            backgroundColor = Theme[colors][background],
            shape = RoundedCornerShape(4.dp),
            modifier = Modifier
                .shadow(4.dp, RoundedCornerShape(4.dp)),
            enter = scaleIn(
                animationSpec = tween(durationMillis = 120, easing = LinearOutSlowInEasing),
                initialScale = 0.8f,
                transformOrigin = TransformOrigin(0f, 0f)
            ) + fadeIn(tween(durationMillis = 30)),
            exit = scaleOut(animationSpec = tween(durationMillis = 1, delayMillis = 75), targetScale = 1f)
                    + fadeOut(tween(durationMillis = 75))
        ) {
            items.forEachIndexed { i, option ->
                Button(
                    onClick = {
                        selectedIndex.value = i
                        expanded = false
                    },
                    modifier = Modifier.padding(4.dp),
                    contentPadding = PaddingValues(horizontal = 8.dp, vertical = 2.dp),
                    shape = RoundedCornerShape(4.dp),
                ) {
                    Text(text = display(option),)
                }
            }
        }
    }
}

So the first step would be to add scrollable modifier to DropdownMenuPanel? Do I then put VerticalScrollbar inside it without ScrollArea?

[alexstyl]

I can see the confusion now.

So the first step would be to add scrollable modifier to DropdownMenuPanel?

Normally you would do this yes. However given you want scrollbars, you would need to use ScrollArea to wrap your scrolling container. You cannot wrap the DropdownMenuPanel because the panel is rendered in its own layer. Wrapping the panel with anything won't really place the panel inside of it because of this reason.

So instead, wrap your content into a Box and make that scrollable:

    DropdownMenuPanel {
        val scrollState = rememberScrollState()

        ScrollArea(rememberScrollAreaState(scrollState)) {
            Box(Modifier.verticalScroll(scrollState)) {
                items.forEachIndexed { i, option ->
                    // Item()
                }
            }
            VerticalScrollbar()
        }
    }

[subchannel13]

When I do this I get "size out of range" exception:

DropdownMenuPanel(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            backgroundColor = Theme[colors][background],
            shape = RoundedCornerShape(4.dp),
            modifier = Modifier
                .shadow(4.dp, RoundedCornerShape(4.dp)),
            enter = scaleIn(
                animationSpec = tween(durationMillis = 120, easing = LinearOutSlowInEasing),
                initialScale = 0.8f,
                transformOrigin = TransformOrigin(0f, 0f)
            ) + fadeIn(tween(durationMillis = 30)),
            exit = scaleOut(animationSpec = tween(durationMillis = 1, delayMillis = 75), targetScale = 1f)
                    + fadeOut(tween(durationMillis = 75))
        ) {
            val scrollState = rememberScrollState()
            ScrollArea(rememberScrollAreaState(scrollState)) {
                Box(Modifier.verticalScroll(scrollState)) {
                    items.forEachIndexed { i, option ->
                        Button(
                            onClick = {
                                selectedIndex.value = i
                                expanded = false
                            },
                            modifier = Modifier.padding(4.dp),
                            contentPadding = PaddingValues(horizontal = 8.dp, vertical = 2.dp),
                            shape = RoundedCornerShape(4.dp),
                        ) {
                            Text(text = display(option),)
                        }
                    }

                    VerticalScrollbar(
                        modifier = Modifier.align(Alignment.TopEnd)
                        .background(Color.Black.copy(0.1f))
                        .fillMaxHeight()
                        .width(12.dp)
                        .padding(2.dp)
                    ) {
                        Thumb(Modifier.background(Color.Black.copy(0.3f), RoundedCornerShape(100)))
                    }
                }
            }
        }

If I comment out the Box around items then all items end up overlapped in the single line.

[alexstyl]

The 'size out of range' exception is because you are placing the scrollbar inside of the scrollable area. To make it work move outside of the Box(), but inside of the ScrollArea():

        val scrollState = rememberScrollState()
        ScrollArea(rememberScrollAreaState(scrollState)) {
            Column(Modifier.verticalScroll(scrollState)) { // <- replaced Box with Column so that the items are after each other
                items.forEachIndexed { i, option ->
                    Button(onClick = {}) {
                        Text(text = option)
                    }
                }
            }
            VerticalScrollbar( // <- this must not be inside of the Box
                modifier = Modifier.align(Alignment.TopEnd)
                    .background(Color.Black.copy(0.1f))
                    .fillMaxHeight()
                    .width(12.dp)
                    .padding(2.dp)
            ) {
                Thumb(Modifier.background(Color.Black.copy(0.3f), RoundedCornerShape(100)))
            }

        }

PS: The 'size out of range' error is not user friendly and made a note to give a more explicit error in a future update.

[subchannel13]

Thanks! Now it works without errors. The only issue is that scrollbar stretches the height of DropdownMenuPanel to entire window height even for a few items.

[alexstyl]

Cool. Glad all is sorted out. Set your panel a fixed height and you are set. Closing this.