Exposed Drop Down Menu is not expanding to show full list

Question

I am trying to use the ExposedDropDownMenu but is not expanding enough. It expands showing only the first item in the list.

I followed the following Stackoverflow thread.

This is the full code:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Combobox() {
val contextForToast = LocalContext.current.applicationContext
val listItems = arrayOf("Favorites", "Options", "Settings", "Share")

// state of the menu
var expanded by remember {
    mutableStateOf(false)
}

// remember the selected item
var selectedItem by remember {
    mutableStateOf(listItems[0])
}

// box
ExposedDropdownMenuBox(
    expanded = expanded,
    onExpandedChange = {
        expanded = !expanded
    }
) {
    OutlinedTextField(
        value = selectedItem,
        onValueChange = { selectedItem = it },
        modifier = Modifier.menuAnchor(),
        //readOnly = true,
        label = { Text(text = "Label") },
        trailingIcon = {
            ExposedDropdownMenuDefaults.TrailingIcon(
                expanded = expanded
            )
        },
        colors = ExposedDropdownMenuDefaults.textFieldColors()
    )

    // filter options based on text field value
    val filteringOptions =
        listItems.filter { it.contains(selectedItem, ignoreCase = true) }

    if (filteringOptions.isNotEmpty()) {
        // menu
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            // this is a column scope
            // all the items are added vertically
            filteringOptions.forEach { selectionOption ->
                // menu item
                DropdownMenuItem(
                    text = {Text(text = selectionOption)},
                    onClick = {
                        selectedItem = selectionOption
                        Toast.makeText(contextForToast, selectedItem, Toast.LENGTH_SHORT).show()
                        expanded = false
                    },
                    contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
                )
            }
        }
    }
}

}

I tested it with readonly true and false but did not make any difference

Answer 1

I identify the cause of the problem.

val filteringOptions = 
    listItems.filter { it.contains("$selectedItem", ignoreCase = true) }

The filtering code needs to be refined.

This is restricting the selection items to only one item or items with the same characters. (red, red carpet, etc. if the selected item == red)