In my Compose Multiplatform project for Desktop and Android, there are multiple dropdown menus. There are two different methods for creating a dropdown menu in my project, resulting in different styles but similar behaviour.

On desktop, the dropdowns work fine. On android (tested on the emulator and various android devices), you can expand the ExposedDropdownMenu and see the options, but you can’t click/tap on any of the options inside of it. You can also collapse it with no problem, just the options don’t work.

There are two ways how you can still use the menus:

• Connect a keyboard to the android device and use the arrow keys to navigate to a option, then press enter to select it.
• Click a button that leads to another screen, then return from that screen back to the original screen where the dropdown is located.

Other info:

• I use Voyager for navigation.
• All dependencies are updated to the latest version

The dropdowns:

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun CustomExposedDropDown(
    label: @Composable BoxScope.() -> Unit,
    items: List<@Composable RowScope.() -> Unit>,
    onChange: (Int) -> Unit,
    modifier: Modifier = Modifier
) {
    var isExpanded by remember { mutableStateOf(false) }
    val iconRotation by animateFloatAsState(if (isExpanded) 180f else 0f)

    ExposedDropdownMenuBox(
        expanded = isExpanded,
        modifier = modifier,
        onExpandedChange = {
            isExpanded = it
        }
    ) {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .fillMaxWidth()
                .heightIn(min = 36.dp)
                .background(
                    color = MaterialTheme.colors.onSurface
                        .copy(alpha = TextFieldDefaults.BackgroundOpacity),
                    shape = RoundedCornerShape(10.dp)
                )
                .clickable(onClick = {})
        ) {
            label()
            Icon(
                imageVector = Icons.Filled.ArrowDropDown,
                contentDescription = "Dropdown",
                tint = MaterialTheme.colors.primary,
                modifier = Modifier
                    .align(Alignment.CenterEnd)
                    .padding(end = 12.dp)
                    .size(12.dp)
                    .rotate(iconRotation)
            )
        }
        ExposedDropdownMenu(
            expanded = isExpanded,
            onDismissRequest = { isExpanded = false },
        ) {
            items.forEachIndexed { i, item ->
                DropdownMenuItem(
                    content = item,
                    onClick = {
                        onChange(i)
                        isExpanded = false
                    }
                )
            }
        }
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun DynamicSelectTextField(
    selectedValue: String,
    options: List<String>,
    label: String,
    onValueChangedEvent: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    var expanded by remember { mutableStateOf(false) }

    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = { expanded = !expanded },
        modifier = modifier
    ) {
        OutlinedTextField(
            readOnly = true,
            value = selectedValue,
            onValueChange = {},
            label = { Text(text = label) },
            trailingIcon = {
                ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
            },
            modifier = Modifier
                .fillMaxWidth()
        )

        ExposedDropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
            options.forEach { option: String ->
                DropdownMenuItem(
                    content = { Text(text = option) },
                    onClick = {
                        expanded = false
                        onValueChangedEvent(option)
                    }
                )
            }
        }
    }
}

Dropdown usage:

 CustomExposedDropDown(
                        label = {
                            TranslatedText(Translation.SUGGESTED_SERVERS.msg())
                        },
                        items = serverOptions.map {
                            {
                                Text(it.displayName)
                            }
                        },
                        onChange = {
                            screenModel.setSuggestedServer(serverOptions[it])
                        },
                        modifier = Modifier
                            .width(200.dp)
                            .align(Alignment.CenterHorizontally)
                            .padding(bottom = 10.dp)
                    )

What I’ve tried:

• Update the dependencies
• Tried other kinds of dropdowns, as you can see I also already two different ones