How to best show a popup menu on Jetpack Compose for Desktop?

Question

So I have the concept of a popup menu...

@Composable
expect fun PopupMenu(
    menuItems: List<String>,
    onClickCallbacks: List<() -> Unit>,
    showMenu: Boolean,
    onDismiss: () -> Unit,
    toggle: @Composable () -> Unit,
)

And I have a popup menu implementation for desktop...

@Composable
actual fun PopupMenu(
    menuItems: List<String>,
    onClickCallbacks: List<() -> Unit>,
    showMenu: Boolean,
    onDismiss: () -> Unit,
    toggle: @Composable () -> Unit,
) {
    DropdownMenu(
        expanded = showMenu,
        onDismissRequest = { onDismiss() },
    ) {
        menuItems.forEachIndexed { index, item ->
            DropdownMenuItem(onClick = {
                onDismiss()
                onClickCallbacks[index]
            }) {
                Text(text = item)
            }
        }
    }
}

What I'm trying to figure out is, how do I display this around here?

@Composable
fun OneCard(content: MutableState<TextFieldValue>, onValueChange: (TextFieldValue) -> Unit ) {
    Card(modifier = Modifier.draggable(DraggableState {  }, Orientation.Vertical)
        .then(Modifier.padding(16.dp))) {
        OutlinedTextField(
            value = content.value,
            onValueChange = onValueChange,
            placeholder = { TextFieldValue(text = "Your thoughts?") },
            modifier = Modifier.selectable(
                selected = false,
                onClick = {
                    // TODO: How to show popup menu on right click, or perhaps after a delay,
                    //       somewhere near the selected text?
                }
            )
        )
    }
}

Answer 1

CursorDropdownMenu can be used in this case, for example here's how you can show it on mouse right clicks:

var expanded by remember { mutableStateOf(false) }
Box(
    Modifier
        .fillMaxSize()
        .mouseClickable {
            if (buttons.isSecondaryPressed) {
                expanded = true
            }
        }
)
// tmp fix for https://github.com/JetBrains/compose-jb/issues/2012
var renderCount by remember { mutableStateOf(0) }
listOf(renderCount, renderCount - 1).forEach { renderId ->
    val isActive = renderId == renderCount
    key(renderId) {
        CursorDropdownMenu(
            expanded = expanded && isActive,
            onDismissRequest = {
                if (isActive) {
                    renderCount += 1
                    expanded = false
                }
            },
        ) {
            DropdownMenuItem({}) {
                Text("First item")
            }
            DropdownMenuItem({}) {
                Text("Second item")
            }
        }
    }
}