react-aria-components Tooltip not working with MenuItem #9062
Description
Provide a general summary of the issue here
TooltipTrigger does not work when wrapping MenuItem.
🤔 Expected Behavior?
Wrapping MenuItem with TooltipTrigger should work as it normally does for other components.
😯 Current Behavior
Wrapping the AriaMenuItem in Pressable or Focusable fixes the problem, but then it complains that those require child ref to be forwarded.
Wrapping the content also works, but causes a strange tooltip flicker even though actual DOM is menu div > anchor > content?
<AriaMenuItem>
<Link>
{
// ... content
}
</Link>
</AriaMenuItem>💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
Here is the component code. In usage I am providing href which converts the MenuItem, as it should.
type NavLinkProps = AriaMenuItemProps &
NavLinkVariants & {
children: string;
className?: string;
icon?: LucideIcon;
right?: React.ReactNode;
};
export const NavLink = ({
children,
icon: Icon,
right: Right,
...allProps
}: NavLinkProps) => {
const [ref, width] = useContainerWidth();
const [variants, props] = separateVariantProps(allProps, navlink);
const { base, content, icon, right } = navlink({
withIcon: Icon !== undefined,
...variants,
});
return (
<TooltipTrigger
closeDelay={100}
delay={0}
isDisabled={width > ICON_ONLY_BREAKPOINT}
>
<AriaMenuItem
{...props}
ref={ref}
aria-label={children}
className={base()}
>
{Icon && <Icon className={icon()} />}
<span className={content()}>{children}</span>
{Right && <div className={right()}>{Right}</div>}
</AriaMenuItem>
<Tooltip offset={4} placement="right">
{children}
</Tooltip>
</TooltipTrigger>
);
};Version
^1.12.1 (react-aria-components)
What browsers are you seeing the problem on?
Safari
If other, please specify.
No response
What operating system are you using?
MacOS
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response