I'm working on a dropdown selector. Has anyone come up with an acceptable solution? My current imple...

# compose-desktop

[Sean Proctor]

I'm working on a dropdown selector. Has anyone come up with an acceptable solution? My current implementation in thread.

[Sean Proctor]

@Composable
actual fun DropdownSelector(
    modifier: Modifier,
    selectedIndex: Int,
    items: List<String>,
    label: String,
    errorRes: StringResource?,
    onChange: (Int) -> Unit,
) {
    var expanded by remember { mutableStateOf(false) }
    val selectedItemText = when {
        items.isEmpty() -> ""
        selectedIndex < 0 -> items[0]
        else -> items[selectedIndex]
    }
    val indicatorColor = when {
        errorRes != null -> MaterialTheme.colors.error.copy(alpha = ContentAlpha.high)
        expanded -> MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high)
        else -> MaterialTheme.colors.onSurface.copy(alpha = 0.42f)
    }
    Column(modifier) {
        OutlinedTextField(
            value = selectedItemText,
            label = { Text(label) },
            onValueChange = {},
            readOnly = true,
            trailingIcon = {
                IconButton(
                    onClick = {
                        expanded = !expanded
                    },
                ) {
                    Icon(
                        imageVector = Icons.Default.ArrowDropDown,
                        contentDescription = "select",
                        Modifier.rotate(
                            if (expanded) 180f else 0f
                        ),
                    )
                }
            },
            isError = errorRes != null
        )
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = {
                expanded = false
            },
        ) {
            items.forEachIndexed { index, item ->
                DropdownMenuItem(
                    onClick = {
                        onChange(index)
                        expanded = false
                    }
                ) {
                    Text(text = item)
                }
            }
        }
        if (errorRes != null) {
            Text(
                text = label,
                modifier = Modifier
                    .background(color = MaterialTheme.colors.background),
                style = MaterialTheme.typography.caption.copy(color = indicatorColor)
            )
        }
    }
}

[Sean Proctor]

clicking on the IconButton while the popup is showing, causes both actions to happen, which is clearly a mistake. Unfortunately the onDismissRequest is called first.

[orangy]

Can’t you set enabled = !expanded on icon button?

[Sean Proctor]

Yes, but clicking on it triggers the onClick for the icon button and the onDismissRequest for the DropdownMenu

[orangy]

But if you disable it, it shouldn’t produce the click event?

[Sean Proctor]

oh, sorry, misread that.

[Sean Proctor]

That makes a lot of sense. Let me try it.

[orangy]

Could change appearance, though

[Sean Proctor]

True, it does. It's not a perfect solution, but it's good enough.

[Sean Proctor]

Thank you!

[orangy]

As a dirty hack, you can copy implementation of IconButton, it’s trivial, and remove the line about providing disabled ContentAlpha 🙂

[orangy]

But I’m sure there should be “proper” way to deal with states like this.

[Sean Proctor]

There's too many things about this implementation that I don't like. I'd prefer that clicking on the textfield opened the menu, but trying to implement that was even more buggy.

[orangy]

Also, I wonder if DropDownMenu should be capturing mouse input and consume click outside
cc @Igor Demin

[Sean Proctor]

That would make sense to me.