diff --git a/.changeset/silly-cooks-divide.md b/.changeset/silly-cooks-divide.md new file mode 100644 index 0000000000..b2a4af1980 --- /dev/null +++ b/.changeset/silly-cooks-divide.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/menu": patch +--- + +The condition for data-selectable now includes isHovered along with isSelectable.This ensures that the item can be selected when it is hovered over, addressing the issue where the selection stays in the same place when the cursor moves out of the menu.This change should help fix the dropdown selection functionality on mobile devices and improve the user experience. diff --git a/packages/components/menu/src/use-menu-item.ts b/packages/components/menu/src/use-menu-item.ts index 360b101e27..9971852904 100644 --- a/packages/components/menu/src/use-menu-item.ts +++ b/packages/components/menu/src/use-menu-item.ts @@ -134,7 +134,7 @@ export function useMenuItem(originalProps: UseMenuItemProps props, ), "data-focus": dataAttr(isFocused), - "data-selectable": dataAttr(isSelectable), + "data-selectable": dataAttr(isHovered && isSelectable), "data-hover": dataAttr(isMobile ? isHovered || isPressed : isHovered), "data-disabled": dataAttr(isDisabled), "data-selected": dataAttr(isSelected),