fix(MenuButton): fix dialog close behavior (#1912)

mondaycom · Jan 29, 2024 · 61a50dd · 61a50dd
1 parent b53bca4
commit 61a50dd
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git 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
@@ -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<MenuButtonProps> & {
@@ -144,6 +152,7 @@ const MenuButton: VibeComponent<MenuButtonProps> & {
       zIndex = null,
       ariaLabel = "Menu",
       closeDialogOnContentClick = false,
+      closeMenuOnItemClick,
       dialogOffset = MOVE_BY,
       dialogPosition = Dialog.positions.BOTTOM_START,
       dialogClassName,
@@ -179,15 +188,19 @@ const MenuButton: VibeComponent<MenuButtonProps> & {
 
     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(