In jetpack compose, is it possible to use pagination in ExposedDropdownMenu

Question

I want to show a ExposedDropdownMenu which list is coming from api. Is it possible to add pagination in ExposedDropdownMenu. Here I tried the code

DivisionDropDown.kt

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DivisionDropDown(
    list: List<String>,
    selectedItem: String,
    itemSelectListener: (String) -> Unit,
    modifier: Modifier = Modifier
) {

    var expanded by remember { mutableStateOf(false) }

    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = { expanded = !expanded },
        modifier = modifier.then(
            Modifier.wrapContentWidth()
        )
    ) {
        OutlinedTextField(
            value = selectedItem,
            shape = RoundedCornerShape(12.dp),
            label = {
                Text(
                    text = stringResource(id = R.string.division_of_school)
                )
            },
            readOnly = true,
            onValueChange = { itemSelectListener(it) },
            trailingIcon = {
                Icon(
                    painter = painterResource(R.drawable.ic_down),
                    contentDescription = "",
                    modifier = Modifier.rotate(if (expanded) 180f else 0f)
                )
            },
            maxLines = 1,
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .menuAnchor()

        )


        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .exposedDropdownSize(true),
        ) {
            list.forEach {
                DropdownMenuItem(
                    text = { Text(it) },
                    onClick = {
                        itemSelectListener(it)
                        expanded = false
                    },
                    contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
                )
            }
        }

    }

}

here I used List to show it in the dropdown menu. And the ScreenUI code is given bellow

SchoolInfoScreen.kt

@Composable
fun SchoolInfoScreen(
    viewModel: ProfileEditViewModel
) {

    val divisionPagingItems: LazyPagingItems<Division> = viewModel.divisionState.collectAsLazyPagingItems()

    ConstraintLayout(
        Modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .padding(horizontal = 16.dp)
    ) {

        val (divisionDropDown) = createRefs()

        DivisionDropDown(
            list = divisionList, // Here how can I use divisionPagingItems
            selectedItem = selectedDivision,
            itemSelectListener = {

            },
            modifier = Modifier
                .constrainAs(divisionDropDown) {
                    top.linkTo(parent.top, 32.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
        )
    }

}

Answer 1

Finally I solved the problem. Here is the solution.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DivisionDropDown(
    pagingItems: LazyPagingItems<Division>,
    selectedItem: String,
    itemSelectListener: (Division) -> Unit,
    modifier: Modifier = Modifier
) {

    var expanded by remember { mutableStateOf(false) }

    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = { expanded = !expanded },
        modifier = modifier.then(
            Modifier.wrapContentWidth()
        )
    ) {

        TextFieldForDropDown(
            labelText = R.string.division_of_school,
            selectedItem = selectedItem,
            isExpended = expanded,
            modifier = Modifier.menuAnchor()
        )

        MaterialTheme(
            shapes = MaterialTheme.shapes.copy(extraSmall = RoundedCornerShape(12.dp))
        ) {

            ExposedDropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false },
                modifier = Modifier
                    .background(color = colorResource(id = R.color.white))
                    .exposedDropdownSize(true),
            ) {
                pagingItems.itemSnapshotList.forEach {
                    MenuItem(
                        text = it?.name ?: "",
                        contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding
                    ) {
                        expanded = false
                        it?.let { selectedDivision -> itemSelectListener(selectedDivision) }
                    }
                }
            }

        }

    }

}