Hi! In a thread below there is a peculiar behaviou...

# compose

[Anastasia Rozovskaya]

Hi! In a thread below there is a peculiar behaviour of ExpandedDropdownMenuDefaults.TrailingIcon. Feel free to share your thoughts.

[Anastasia Rozovskaya]

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.

[lhwdev]

Can you show more code around this one?

[Anastasia Rozovskaya]

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.

[lhwdev]

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.

[Anastasia Rozovskaya]

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.

[Anastasia Rozovskaya]

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.