DropDownMenuItem doesn't work properly in Android jetpack compose

Question

I want to show a drop down list item in my application but it doesn't work. It shows an error No value passed for parameter 'text'. I checked the DropdownMenuItem() function it shows the following argumens:

@Composable
@ComposableInferredTarget
public fun DropdownMenuItem(
    text: @Composable () -> Unit,
    onClick: () -> Unit,
    modifier: Modifier,
    leadingIcon: @Composable() (() -> Unit)?,
    trailingIcon: @Composable() (() -> Unit)?,
    enabled: Boolean,
    colors: MenuItemColors,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource
): Unit

My code is:

@Composable
fun dropDownMenu() {

    var expanded by remember { mutableStateOf(false) }
    val suggestions = listOf("Kotlin", "Java", "Dart", "Python")
    var selectedText by remember { mutableStateOf("") }

    var textfieldSize by remember { mutableStateOf(Size.Zero)}

    val icon = if (expanded)
        Icons.Filled.KeyboardArrowUp
    else
        Icons.Filled.KeyboardArrowDown


    Column(Modifier.padding(20.dp)) {
        OutlinedTextField(
            value = selectedText,
            onValueChange = { selectedText = it },
            modifier = Modifier
                .fillMaxWidth()
                .onGloballyPositioned { coordinates ->
                    //This value is used to assign to the DropDown the same width
                    textfieldSize = coordinates.size.toSize()
                },
            label = {Text("Label")},
            trailingIcon = {
                Icon(icon,"contentDescription",
                    Modifier.clickable { expanded = !expanded })
            }
        )
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .width(with(LocalDensity.current){textfieldSize.width.toDp()})
        ) {
            suggestions.forEach { label ->
                DropdownMenuItem(onClick = {
                    selectedText = label
                    expanded = false
                }) {
                    Text(text = label)
                }
            }
        }
    }

}

I tried to resolve the issues by the following code:

DropdownMenuItem(text = {label}, onClick = {
                    selectedText = label
                    expanded = false
                })

It pops up a blank window without showing any item list but the item is clickable. When I click on the blank window it write the item on the field.

How can I show my items when I press the drop down icon?

Answer 1

You have to combine both your approaches. text is not the last parameter of DropdownMenuItem, so you cannot use trailing lambda syntax. text = {label} would compile, but text is @Composable () -> Unit, so just passing label won't display anything. What you have to do is this:

DropdownMenuItem(
    text = { Text(text = label) },
    ...
)