Compose ExposedDropdownMenuBox: problems with TalkBack

19.11.2023

Jetpack Compose has ExposedDropdownMenuBox which is for creating dropdown menus. I couldn't get TalkBack to work with it properly so I had to revert to using regular Box. So if you have your dropdown menu done with ExposedDropdownMenuBox but can't get TalkBack working properly, all you gotta do is:

Change ExposedDropdownMenuBox to regular Box
Change ExposedDropdownMenu to regular DropdownMenu

Then if you have problems with the dropdown menu width you can fix it using this trick (from SO):

Add the variable to keep textField width:

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

Set the value in the onGloballyPositioned of TextField

onGloballyPositioned { coordinates ->
   textFieldSize = coordinates.size.toSize()
}

Read the value in ExposedDropdownMenu

ExposedDropdownMenu(
    expanded = expanded,
    onDismissRequest = { expanded = false },
    modifier = Modifier
        .background(Color.White)
        .width(with(LocalDensity.current) { textFieldSize.width.toDp() })
)