Long dropdown menu gets cut off

[jollygreenegiant]

When creating a DropdownMenu that has a long list of DropdownMenuItems, if the list is long enough that the popup extends past the edges of the window, the list gets cut off. I'd like to see a way to create a scrollable dropdown menu, or be able to give it a fixed height with automatic scrolling capability.

Here is how I'm creating the DropdownMenu:

DropdownMenu(
    expanded = isExpanded,
    onDismissRequest = { isExpanded = false }
) {
    LazyColumn {
        itemsIndexed(
            items = menuItemList,
            itemContent = { index, item ->
                DropdownMenuItem(onClick = {
                    selectedIndex = index
                    isExpanded = false
                }) {
                    Text(index.toString())
                }
            }
        )
    }
}

When that list is long enough to extend past the contraints of the window, it just gets cut off and is not scrollable. Is there a way to make it scrollable or is that not possible yet? Is there another recommended way of handling long selectable lists of data?

[Exidel]

DropdownMenu doesn't need LazyColumn inside, dropped menu it's ColumnScope so it's scrollable as default. Also you can modify your dropped menu length with Modifier.size/height.

                Box(   
                    modifier = Modifier
                        .size(70.dp, 50.dp)
                        .wrapContentSize(Alignment.TopStart)
                ) {
                    Text(
                        text = "anyList[varIndex]",
                        modifier = Modifier
                            .fillMaxWidth()
                            .clickable(onClick = { someBooleanVariable = true })
                    )

                    DropdownMenu(
                        expanded = someBooleanVariable,
                        onDismissRequest = { someBooleanVariable = false },
                        modifier = Modifier
                            .size(70.dp, 250.dp)
                    ) {
                        anyList.forEachIndexed { index, element ->
                            DropdownMenuItem(onClick = {
                                varIndex = index
                                someBooleanVariable = false
                            }) { Text(text = "$element") }
                        }
                    }
                }

https://user-images.githubusercontent.com/80458677/112732910-dd1f4580-8f4d-11eb-9657-76f00afd9ea6.mp4

[jollygreenegiant]

@Exidel I had no idea it would be so easy, or that ColumnScope was scrollable by default. Thank you!

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.