I'm attempting to create an icon button that pops ...

# compose

[rnett]

I'm attempting to create an icon button that pops up a dropdown menu, where the menu appears directly to the right of the icon button (with their tops aligned). But even if I pass in a negative y offset, it's ignored - the dropdown always starts at the bottom of the icon button. Is there a better way to do this? It seems inordinately difficult

[Stylianos Gakis]

Do you put the drop-down on a row?
What do you want the final result to look like optimally?

[rnett]

Here's the code:

var dropdownExpanded by remember { mutableStateOf(false) }

var boxSize by remember { mutableStateOf(IntSize.Zero) }

Row(verticalAlignment = Alignment.Top) {
    IconButton({ dropdownExpanded = !dropdownExpanded }, Modifier.onGloballyPositioned { boxSize = it.size }) {
        Icon(Icons.Default.Add, "Open Window")
    }

    DropdownMenu(
        dropdownExpanded,
        { dropdownExpanded = false },
        offset = with(LocalDensity.current) {
            DpOffset(boxSize.width.toDp(), -boxSize.height.toDp())
        }
    ) {
        openers.forEach {
            DropdownMenuItem(
                { it.OpenerTitle() },
                {
                    windowManager.openWindow(it.openWindow(), true)
                    dropdownExpanded = false
                },
                leadingIcon = it.openerIcon
            )
        }
    }
}

[rnett]

Here's what I get:

[rnett]

Here's what I want:

[rnett]

I've verified that 1) increasing the negative y offset changes nothing, and 2) the offsets are taking affect, e.g. a positive y offset does affect it

[Stylianos Gakis]

What happens when you put no offset at all?

[rnett]

image.png

[rnett]

Does anybody know a way around this dropdown menu offset clipping? Or should I file an issue?