https://kotlinlang.org logo
Title
a

Anastasia Rozovskaya

04/12/2022, 8:55 AM
Hi! In a thread below there is a peculiar behaviour of
ExpandedDropdownMenuDefaults.TrailingIcon
. Feel free to share your thoughts.
This is an inside of
OutlinedTextField
...
trailingIcon = {
    ExposedDropdownMenuDefaults.TrailingIcon(
        expanded = isExpanded,
        onIconClick = {}//onIconClick::invoke
    )
},
...
When I replace
onIconClick::invoke
with
{}
where onIconClick is a field with the following signature
onIconClick: () -> Unit
, the click on trailing icon works as expected - aka shows or hides a dropdown menu. But if I turn it back, meaning when I call onIconClick - the ripple animation is present, but dropdown menu neither shows nor hides. I feel like I’m missing something very basic in this behaviour.
l

lhwdev

04/12/2022, 9:06 AM
Can you show more code around this one?
a

Anastasia Rozovskaya

04/12/2022, 9:33 AM
Yes, sure
@ExperimentalMaterialApi
@Composable
private fun SelectedCitizenshipType(
    modifier: Modifier = Modifier,
    selectedItem: CitizenshipType,
    isExpanded: Boolean,
    onIconClick: () -> Unit,
) {
    val textFieldColors = ExposedDropdownMenuDefaults.textFieldColors(
        backgroundColor = AppTheme.colors.surface,
        textColor = AppTheme.colors.onSurface,
        ...
    )

    OutlinedTextField(
        modifier = modifier,
        readOnly = true,
        value = stringResource(id = selectedItem.nameStringResId),
        onValueChange = { /* lambda is empty due to readOnly flag above */ },
        label = { Text(stringResource(R.string.text_citizenship)) },
        trailingIcon = {
            ExposedDropdownMenuDefaults.TrailingIcon(
                expanded = isExpanded,
                onIconClick = {}//onIconClick::invoke
            )
        },
        colors = textFieldColors
    )
}
And SelectedCitizenshipType is called inside the ExposedDropdownMenuBox. I added some extra code around that to provide more context.
var isExpanded by remember { mutableStateOf(false) }

    ExposedDropdownMenuBox(...) {
        SelectedCitizenshipType(
            modifier = Modifier.fillMaxWidth(),
            selectedItem = selectedItem,
            isExpanded = isExpanded,
        ) {
            isExpanded = !isExpanded
        }
        DropdownMenu(
            modifier = Modifier.exposedDropdownSize(),
            expanded = isExpanded,
            onDismissRequest = { isExpanded = false },
            properties = PopupProperties(
                focusable = true,
                dismissOnBackPress = true,
                dismissOnClickOutside = true,
            )
        ) {
            ...
        }
    }
I can totally comment out onIconClick (if you look in the implementation on TrailingIcon, you’ll see that they provide
{}
for click there) and the click will work.
l

lhwdev

04/12/2022, 9:56 AM
First, IDK if related, but why not
onIconClick
rather than
onIconClick::invoke
? and there is `ExposedDropdownMenu,`I wonder why you used
DropdownMenu
..? Anyway at first glimpse I cannot get why it doesn't show.
a

Anastasia Rozovskaya

04/12/2022, 10:35 AM
with ExposedDropdownMenu there is a bug, see here https://issuetracker.google.com/issues/205589613 So for the moment I switched to the DropdownMenu. At first I used just
onIconClick
yeah, it doesn’t work either.
1
I fixed an issue by moving
isExpanded = !isExpanded
down and using it inside SelectedCitizenshipType here
onIconClick = { isExpanded != isExpanded }
explicitly. One thing that remains is the non-existent ripple, when I’m trying to click on a trailing icon to return from the expanded case. If you use ExpandedDropdownMenu - it looks OK, the ripple is present in both directions. But when you use a quick fix from a reported bug, ripple works only when going from base case to expanded. That’s strange because if you go though the elements hierarchy with Layout Inspector, nothing seems to be in conflict with the click, nobody covers it.