diff --git a/src/components/Menu/MenuItem/hooks/useMenuItemKeyboardEvents.ts b/src/components/Menu/MenuItem/hooks/useMenuItemKeyboardEvents.ts index dbfafc742d..837cc6cb62 100644 --- a/src/components/Menu/MenuItem/hooks/useMenuItemKeyboardEvents.ts +++ b/src/components/Menu/MenuItem/hooks/useMenuItemKeyboardEvents.ts @@ -50,7 +50,7 @@ export default function useMenuItemKeyboardEvents({ if (isActive && hasChildren) { setActiveItemIndex(index); - if (!splitMenuItem) { + if (!splitMenuItem || isMouseEnterIconButton) { setSubMenuIsOpenByIndex(index, true); return; } diff --git a/src/components/MenuButton/MenuButton.tsx b/src/components/MenuButton/MenuButton.tsx index aab54401cf..46d1819f4d 100644 --- a/src/components/MenuButton/MenuButton.tsx +++ b/src/components/MenuButton/MenuButton.tsx @@ -47,6 +47,10 @@ interface MenuButtonProps extends VibeComponentProps { onClick?: (event: React.MouseEvent) => void; zIndex?: number; ariaLabel?: string; + // TODO: remove in next major version + /** + * @deprecated use closeMenuOnItemClick instead + */ closeDialogOnContentClick?: boolean; /* Class name to provide the element which wraps the popover/modal/dialog @@ -119,6 +123,10 @@ interface MenuButtonProps extends VibeComponentProps { * Element to be used as the trigger element for the Menu - default is button */ triggerElement?: React.ElementType; + /** + * Close the menu when an item is clicked + */ + closeMenuOnItemClick?: boolean; } const MenuButton: VibeComponent & { @@ -144,6 +152,7 @@ const MenuButton: VibeComponent & { zIndex = null, ariaLabel = "Menu", closeDialogOnContentClick = false, + closeMenuOnItemClick, dialogOffset = MOVE_BY, dialogPosition = Dialog.positions.BOTTOM_START, dialogClassName, @@ -179,15 +188,19 @@ const MenuButton: VibeComponent & { const onMenuDidClose = useCallback( (event: React.KeyboardEvent) => { - if (event && event.key === "Escape") { + const isEscapeClicked = event && event.key === "Escape"; + if (closeMenuOnItemClick || isEscapeClicked) { setIsOpen(false); + } + + if (isEscapeClicked) { const button = componentRef.current; window.requestAnimationFrame(() => { button.focus(); }); } }, - [componentRef, setIsOpen] + [closeMenuOnItemClick] ); const onDialogDidHide = useCallback(