diff --git a/.changeset/long-toes-wait.md b/.changeset/long-toes-wait.md new file mode 100644 index 0000000000..dc5719877c --- /dev/null +++ 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 index 79b73e764b..bd1b9552c1 100644 --- 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( 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( // @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( 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: {