I found a weird situation with the hovered functio...

# compose-desktop

[aris]

I found a weird situation with the hovered function. Sometimes it’s like hovered stops working.

Code inside 👀

hoverable.mov

[aris]

Main menu:

@Composable
fun RightClickOptions(
    showRightClickOptions: Boolean, menuPosition: IntOffset, onDismissRequest: () -> Unit
) {
    var subMenuPosition: Offset? by remember { mutableStateOf(null) }
    var subMenuItems: @Composable () -> Unit by remember { mutableStateOf({}) }

    AnimatedVisibility(showRightClickOptions, exit = ExitTransition.None) {
        Popup(
            onDismissRequest = {
                subMenuPosition = null
                onDismissRequest()
            },
            alignment = Alignment.TopStart,
            offset = menuPosition,
        ) {
            BackgroundComponent(
                modifier = Modifier.width(140.dp).shadow(8.dp).background(backgroundButton)
            ) {
                Column(modifier = Modifier.padding(2.dp)) {
                    Spacer(Modifier.height(2.dp))
                    MenuItem(text = "Arrange Icons", hovered = { subMenuPosition = null })
                    MenuItem(text = "Line up Icons", hovered = { subMenuPosition = null })
                    MenuDivider()
                    MenuItem(text = "Paste", enabled = false, hovered = { subMenuPosition = null })
                    MenuItem(text = "Paste Shortcut",
                        enabled = false,
                        hovered = { subMenuPosition = null }) { println("Opción 2 seleccionada") }
                    MenuItem(text = "Undo Delete", hovered = { subMenuPosition = null })
                    MenuDivider()
                    MenuItem(text = "New", hovered = { offset ->
                        subMenuItems = { SubMenus.new() }
                        subMenuPosition = offset
                    }, showSubMenuIcon = true)
                    MenuDivider()
                    MenuItem(text = "Properties", hovered = { subMenuPosition = null })
                    Spacer(Modifier.height(2.dp))
                }
            }

            subMenuPosition?.let { offset ->
                SubMenu(
                    offset = offset, content = subMenuItems
                )
            }
        }
    }
}

[aris]

Submenú is just a background with the content:

@Composable
fun SubMenu(offset: Offset, content: @Composable () -> Unit) {
    BackgroundComponent(
        modifier = Modifier.width(160.dp)
            .offset { IntOffset(offset.x.toInt(), offset.y.toInt()) }) {
        content()
    }
}

[aris]

MenuItem is the same component on both menus

@Composable
fun MenuItem(
    text: String,
    enabled: Boolean = true,
    showSubMenuIcon: Boolean = false,
    hovered: (Offset?) -> Unit = {},
    onClick: () -> Unit = {}
) {
    val interactionSource = remember { MutableInteractionSource() }
    val isHovered by interactionSource.collectIsHoveredAsState()
    val background = if (isHovered) windowsBlue else backgroundButton
    val textColor = if (isHovered) Color.White else Color.Black

    var subMenuPosition by remember { mutableStateOf(Offset(0f, 0f)) }

    LaunchedEffect(isHovered) {
        if (isHovered) {
            Logger.i{ "MENU $text hovered = $isHovered" }
            hovered(subMenuPosition)
        }else{
            Logger.i{ "MENU $text hovered = $isHovered" }
        }
    }

    Row(
        modifier = Modifier.fillMaxWidth()
            .hoverable(interactionSource)
            .padding(vertical = 2.dp)
            .background(if (enabled) background else backgroundButton)
            .padding(vertical = 6.dp)
            .clickableWithoutRipple { onClick() }
            .onGloballyPositioned { coordinates ->
                val position = coordinates.positionInParent()
                subMenuPosition = Offset(position.x + coordinates.size.width.toFloat(), position.y)
            }
    ) {
        Spacer(Modifier.width(20.dp))
        Text(text, color = if (enabled) textColor else disabledTextColor)
        Spacer(Modifier.weight(1f))
        if (showSubMenuIcon) {
            Text(">", color = textColor)
        }
    }
}