Merge pull request #2957 from contentful/F36-1606

fix(menu): fix menu not closing on blur when items are disabled
contentful · Jan 6, 2025 · c473ec1 · c473ec1
2 parents d5305b6 + ebb96c5
commit c473ec1
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 4 deletions.
diff --git a/.changeset/pretty-bats-reflect.md b/.changeset/pretty-bats-reflect.md
@@ -0,0 +1,5 @@
+---
+'@contentful/f36-menu': patch
+---
+
+Fix menu with all items disabled not closing on blur
diff --git a/packages/components/menu/src/Menu.test.tsx b/packages/components/menu/src/Menu.test.tsx
@@ -265,6 +265,62 @@ describe('Menu', function () {
     });
   });
 
+  it('should close when clicking outside of the menu', async () => {
+    const user = userEvent.setup();
+    const handleClose = jest.fn();
+
+    render(
+      <>
+        <Button testId="buttonToClick" />
+        <Menu isOpen={true} onClose={handleClose}>
+          <Menu.Trigger>
+            <Button>Toggle</Button>
+          </Menu.Trigger>
+          <Menu.List>
+            <Menu.Item>Create an entry</Menu.Item>
+            <Menu.Item>Remove an entry</Menu.Item>
+            <Menu.Item>Embed existing entry</Menu.Item>
+          </Menu.List>
+        </Menu>
+      </>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByTestId('buttonToClick'));
+    expect(handleClose).toHaveBeenCalled();
+  });
+
+  it('should close when clicking outside of the menu with all items disabled', async () => {
+    const user = userEvent.setup();
+    const handleClose = jest.fn();
+
+    render(
+      <>
+        <Button testId="buttonToClick" />
+        <Menu isOpen={true} onClose={handleClose}>
+          <Menu.Trigger>
+            <Button>Toggle</Button>
+          </Menu.Trigger>
+          <Menu.List>
+            <Menu.Item isDisabled>Create an entry</Menu.Item>
+            <Menu.Item isDisabled>Remove an entry</Menu.Item>
+            <Menu.Item isDisabled>Embed existing entry</Menu.Item>
+          </Menu.List>
+        </Menu>
+      </>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByTestId('buttonToClick'));
+    expect(handleClose).toHaveBeenCalled();
+  });
+
   describe('Menu.Submenu', function () {
     const renderMenuWithSubMenu = () =>
       render(

diff --git a/packages/components/menu/src/Menu.tsx b/packages/components/menu/src/Menu.tsx
@@ -93,15 +93,17 @@ export function Menu(props: MenuProps) {
   useEffect(() => {
     if (isOpen && menuListRef.current) {
       const menuItems =
-        menuListRef.current.querySelectorAll(MENU_ITEMS_SELECTOR);
+        menuListRef.current.querySelectorAll<HTMLElement>(MENU_ITEMS_SELECTOR);
 
       if (menuItems.length > 0 && focusedIndex < menuItems.length) {
         // timeout trick to prevent scroll from jumping
         // when the popover is not positioned correctly yet in the opening phase
         setTimeout(() => {
-          (menuItems[focusedIndex] as HTMLElement).focus({
-            preventScroll: false,
-          });
+          menuItems[focusedIndex].focus({ preventScroll: false });
+        }, 0);
+      } else {
+        setTimeout(() => {
+          menuListRef.current.focus({ preventScroll: false });
         }, 0);
       }
     }