Fix submenu anchor closing menu on Enter press

primer · Mar 28, 2024 · d207bf7 · d207bf7
1 parent 39568d4
commit d207bf7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -152,8 +152,15 @@ const Anchor = React.forwardRef<HTMLElement, ActionMenuAnchorProps>(({children,
   const parentActionListContext = useContext(ActionListContainerContext)
   const thisActionListContext = useMemo(
     () =>
-      isSubmenu ? {...parentActionListContext, defaultTrailingVisual: <ChevronRightIcon />} : parentActionListContext,
-    [isSubmenu, parentActionListContext],
+      isSubmenu
+        ? {
+            ...parentActionListContext,
+            defaultTrailingVisual: <ChevronRightIcon />,
+            // Default behavior is to close after selecting; we want to open the submenu instead
+            afterSelect: () => onOpen?.('anchor-click'),
+          }
+        : parentActionListContext,
+    [isSubmenu, onOpen, parentActionListContext],
   )
 
   return (

diff --git a/packages/react/src/__tests__/ActionMenu.test.tsx b/packages/react/src/__tests__/ActionMenu.test.tsx
@@ -533,7 +533,7 @@ describe('ActionMenu', () => {
 
       await user.keyboard('{ArrowRight}')
       expect(component.queryByRole('menu')).not.toBeInTheDocument()
-      expect(baseAnchor).not.toHaveAttribute('aria-expanded')
+      expect(baseAnchor).not.toHaveAttribute('aria-expanded', 'true')
     })
 
     it('opens submenus on enter or right arrow key press', async () => {
@@ -544,15 +544,15 @@ describe('ActionMenu', () => {
       await user.click(baseAnchor)
 
       const submenuAnchor = component.getByRole('menuitem', {name: 'Paste special'})
-      expect(submenuAnchor).toHaveAttribute('aria-haspopup')
+      expect(submenuAnchor).toHaveAttribute('aria-haspopup', 'true')
       submenuAnchor.focus()
       await user.keyboard('{Enter}')
-      expect(submenuAnchor).toHaveAttribute('aria-expanded')
+      expect(submenuAnchor).toHaveAttribute('aria-expanded', 'true')
 
       const subSubmenuAnchor = component.getByRole('menuitem', {name: 'Paste from'})
       subSubmenuAnchor.focus()
       await user.keyboard('{ArrowRight}')
-      expect(subSubmenuAnchor).toHaveAttribute('aria-expanded')
+      expect(subSubmenuAnchor).toHaveAttribute('aria-expanded', 'true')
     })
 
     it('closes top menu on escape or left arrow key press', async () => {
@@ -568,16 +568,16 @@ describe('ActionMenu', () => {
       const subSubmenuAnchor = component.getByRole('menuitem', {name: 'Paste from'})
       await user.click(subSubmenuAnchor)
 
-      expect(subSubmenuAnchor).toHaveAttribute('aria-expanded')
+      expect(subSubmenuAnchor).toHaveAttribute('aria-expanded', 'true')
 
       await user.keyboard('{Escape}')
-      expect(subSubmenuAnchor).not.toHaveAttribute('aria-expanded')
-      expect(submenuAnchor).toHaveAttribute('aria-expanded')
+      expect(subSubmenuAnchor).not.toHaveAttribute('aria-expanded', 'true')
+      expect(submenuAnchor).toHaveAttribute('aria-expanded', 'true')
 
       await user.keyboard('{ArrowLeft}')
-      expect(submenuAnchor).not.toHaveAttribute('aria-expanded')
+      expect(submenuAnchor).not.toHaveAttribute('aria-expanded', 'true')
 
-      expect(baseAnchor).toHaveAttribute('aria-expanded')
+      expect(baseAnchor).toHaveAttribute('aria-expanded', 'true')
     })
 
     it('closes all menus when an item is selected', async () => {
@@ -596,7 +596,7 @@ describe('ActionMenu', () => {
       const subSubmenuItem = component.getByRole('menuitem', {name: 'Current clipboard'})
       await user.click(subSubmenuItem)
 
-      expect(baseAnchor).not.toHaveAttribute('aria-expanded')
+      expect(baseAnchor).not.toHaveAttribute('aria-expanded', 'true')
     })
   })
 })