fix(use-aria-menu): link logic in useMenuItem (#3229)

nextui-org · Jun 14, 2024 · 5b9e317 · 5b9e317
1 parent 995041a
commit 5b9e317
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 7 deletions.
diff --git a/.changeset/long-toes-wait.md b/.changeset/long-toes-wait.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/use-aria-menu": patch
+---
+
+fix link logic in useMenuItem (#2935)
diff --git a/packages/hooks/use-aria-menu/src/use-menu-item.ts b/packages/hooks/use-aria-menu/src/use-menu-item.ts
@@ -10,7 +10,14 @@ import {
   PressEvents,
   RouterOptions,
 } from "@react-types/shared";
-import {chain, filterDOMProps, mergeProps, useRouter, useSlotId} from "@react-aria/utils";
+import {
+  chain,
+  filterDOMProps,
+  mergeProps,
+  useLinkProps,
+  useRouter,
+  useSlotId,
+} from "@react-aria/utils";
 import {getItemCount} from "@react-stately/collections";
 import {isFocusVisible, useFocus, useHover, useKeyboard, usePress} from "@react-aria/interactions";
 import {RefObject} from "react";
@@ -135,7 +142,7 @@ export function useMenuItem<T>(
 
   let isTrigger = !!hasPopup;
   // @ts-ignore
-  let isDisabled = props.isDisabled ?? state.disabledKeys.has(key);
+  let isDisabled = props.isDisabled ?? state.selectionManager.isDisabled(key);
   // @ts-ignore
   let isSelected = props.isSelected ?? state.selectionManager.isSelected(key);
   let data = menuData.get(state);
@@ -144,16 +151,28 @@ export function useMenuItem<T>(
   // @ts-ignore
   let onClose = props.onClose || data.onClose;
   // @ts-ignore
-  let onAction = isTrigger ? () => {} : props.onAction || data.onAction;
   let router = useRouter();
   let performAction = (e: PressEvent) => {
-    if (onAction) {
+    if (isTrigger) {
+      return;
+    }
+
+    if (item?.props?.onAction) {
+      item.props.onAction();
+    }
+
+    if (props.onAction) {
       // @ts-ignore
-      onAction(key);
+      props.onAction(key);
+      // @ts-ignore
+    } else if (data.onAction) {
+      // @ts-ignore
+      data.onAction(key);
     }
 
     if (e.target instanceof HTMLAnchorElement) {
-      router.open(e.target, e, item?.props.href, item?.props.routerOptions as RouterOptions);
+      // @ts-ignore
+      router.open(e.target, e, item.props.href, item.props.routerOptions as RouterOptions);
     }
   };
 
@@ -308,19 +327,24 @@ export function useMenuItem<T>(
   let domProps = filterDOMProps(item.props, {isLink: !!item?.props?.href});
 
   delete domProps.id;
+  // @ts-ignore
+  let linkProps = useLinkProps(item.props);
 
   return {
     menuItemProps: {
       ...ariaProps,
       ...mergeProps(
         domProps,
+        linkProps,
         isTrigger ? {onFocus: itemProps.onFocus} : itemProps,
         pressProps,
         hoverProps,
         keyboardProps,
         focusProps,
+        {
+          onClick: chain(onClick, pressProps.onClick),
+        },
       ),
-      onClick: chain(onClick, pressProps.onClick),
       tabIndex: itemProps.tabIndex != null ? -1 : undefined,
     },
     labelProps: {