I'm displaying a dropdown under a Textfield with a...

# compose

[Marco Pierucci]

I'm displaying a dropdown under a Textfield with an arrow Icon. Straight implementation with BOX -> [TextField,DropdownMenu] worked out of the box, however in order to have the drop-down aligned to the end of the textfield (where the icon is) I had to switch to a column and a nested Box

Column(
        modifier = modifier,
        horizontalAlignment = Alignment.End,
    ) {
        val dropDownIcon =
            if (expanded) Icons.Filled.KeyboardArrowUp else Icons.Filled.KeyboardArrowDown
        TextFieldItem(
            value = selections[currentSelection],
            trailingIcon = {
                Icon(
                    dropDownIcon,
                    contentDescription = "",
                    modifier = Modifier.clickable(onClick = onExpandClick)
                )
            },
            isError = isError,
            readOnly = true,
            label = label

        )
        Box {
            DropdownMenu(
                offset = dropDownOffset,
                expanded = expanded,
                onDismissRequest = onDismissRequest
            ) {
                selections.forEach { selectionEntry ->
                    DropdownMenuItem(
                        onClick = { onSelected(selectionEntry.key) }
                    ) {
                        TextItem(text = selectionEntry.value, style = TextItem.Style.Body2)
                    }
                }
            }
        }
    }

Would this be the right approach or am I missing something. It feels weird to have to rely on columns plus extra boxes

[Marco Pierucci]

My Initial impl was

Box(modifier = modifier) {
        val dropDownIcon =
            if (expanded) Icons.Filled.KeyboardArrowUp else Icons.Filled.KeyboardArrowDown
        TextFieldItem(
            value = selections[currentSelection],
            trailingIcon = {
                Icon(
                    dropDownIcon,
                    contentDescription = "",
                    modifier = Modifier.clickable(onClick = onExpandClick)
                )
            },
            isError = isError,
            readOnly = true,
            label = label

        )
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = onDismissRequest
        ) {
            selections.forEach { selectionEntry ->
                DropdownMenuItem(
                    onClick = { onSelected(selectionEntry.key) }
                ) {
                    TextItem(text = selectionEntry.value, style = TextItem.Style.Body2)
                }
            }
        }
    }

[Marco Pierucci]

(I did try aligning the menu inside the box)