Skip to content

Commit fe3907a

Browse files
committed
fix(Menu): close flyout when hovering disabled items
Let aria-disabled items run the hover handler while still blocking them from opening their own flyout, and close the flyout in MenuList when a mouseover targets the list itself. Signed-off-by: Mohamed Fall <[email protected]>
1 parent d922b9c commit fe3907a

2 files changed

Lines changed: 13 additions & 7 deletions

File tree

‎packages/react-core/src/components/Menu/MenuItem.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -317,7 +317,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
317317
if (disableHover) {
318318
return;
319319
}
320-
if (hasFlyout) {
320+
if (hasFlyout && !isAriaDisabled) {
321321
showFlyout(true);
322322
} else {
323323
setFlyoutRef(null);
@@ -445,11 +445,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
445445
isDanger && styles.modifiers.danger,
446446
className
447447
)}
448-
onMouseOver={() => {
449-
if (!isAriaDisabled) {
450-
onMouseOver();
451-
}
452-
}}
448+
onMouseOver={onMouseOver}
453449
{...(flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout })}
454450
ref={ref}
455451
role={!hasCheckbox ? 'none' : 'menuitem'}

‎packages/react-core/src/components/Menu/MenuList.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,26 @@ export const MenuList: React.FunctionComponent<MenuListProps> = ({
2121
className,
2222
isAriaMultiselectable = false,
2323
'aria-label': ariaLabel,
24+
onMouseOver,
2425
...props
2526
}: MenuListProps) => {
26-
const { role } = useContext(MenuContext);
27+
const { role, setFlyoutRef, disableHover } = useContext(MenuContext);
28+
29+
// Clear flyout reference when mouse is over the menu list itself, but not over a menu item
30+
const handleMouseOver = (event: React.MouseEvent<HTMLUListElement>) => {
31+
if (!disableHover && event.target === event.currentTarget) {
32+
setFlyoutRef?.(null);
33+
}
34+
onMouseOver?.(event);
35+
};
2736

2837
return (
2938
<ul
3039
role={role}
3140
{...(role === 'listbox' && { 'aria-multiselectable': isAriaMultiselectable })}
3241
className={css(styles.menuList, className)}
3342
aria-label={ariaLabel}
43+
onMouseOver={handleMouseOver}
3444
{...props}
3545
>
3646
{children}

0 commit comments

Comments
 (0)