fix(MenuButton): focus on first item on mouse click (ABF-6488)

kronostechnologies · Jun 19, 2023 · e3b42a0 · e3b42a0
1 parent c6e1336
commit e3b42a0
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/packages/react/src/components/menu-button/menu-button.test.tsx b/packages/react/src/components/menu-button/menu-button.test.tsx
@@ -52,6 +52,30 @@ describe('MenuButton', () => {
         expect(getByTestId(wrapper, 'menu').exists()).toBe(true);
     });
 
+    it('should open menu when Space key is pressed', () => {
+        const wrapper = mountWithTheme(<MenuButton buttonType="primary" options={options}>Test</MenuButton>);
+        getByTestId(wrapper, 'menu-button').simulate('keydown', { key: 'Space' });
+        setTimeout(() => {
+            expect(getByTestId(wrapper, 'menu').exists()).toBe(true);
+        }, 0);
+    });
+
+    it('should open menu when Enter key is pressed', () => {
+        const wrapper = mountWithTheme(<MenuButton buttonType="primary" options={options}>Test</MenuButton>);
+        getByTestId(wrapper, 'menu-button').simulate('keydown', { key: 'Enter' });
+        setTimeout(() => {
+            expect(getByTestId(wrapper, 'menu').exists()).toBe(true);
+        });
+    });
+
+    it('should select menu child #0 if Enter is pressed', () => {
+        const wrapper = mountWithTheme(<MenuButton buttonType="primary" options={options}>Test</MenuButton>);
+        getByTestId(wrapper, 'menu-button').simulate('keydown', { key: 'Enter' });
+        setTimeout(() => {
+            expect(document.activeElement).toBe(getByTestId(wrapper, 'menu').getNodes()[0]);
+        });
+    });
+
     it('should be default open when defaultOpen prop is set to true', () => {
         const wrapper = mountWithTheme(
             <MenuButton buttonType="primary" defaultOpen options={options}>

diff --git a/packages/react/src/components/menu-button/menu-button.tsx b/packages/react/src/components/menu-button/menu-button.tsx
@@ -44,7 +44,7 @@ export const MenuButton: FunctionComponent<PropsWithChildren<Props>> = ({
     onMenuVisibilityChanged,
 }) => {
     const [visible, setVisible] = useState(!!defaultOpen);
-    const initialFocusIndex = 0;
+    const [initialFocusIndex, setInitialFocusIndex] = useState(0);
     const buttonRef = useRef<HTMLButtonElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -73,11 +73,15 @@ export const MenuButton: FunctionComponent<PropsWithChildren<Props>> = ({
 
     /**
      * Set focus on first menu item conditionally
-     * irrespective of whether it's a keypress, or a mouse event
+     * depending on whether it's a keypress, or a mouse event
      * @type {() => void}
      */
-    const handleClickInside = useCallback(() => {
+    const handleClickInside = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
         setVisible(!visible);
+        // event.detail returns an integer, indicating how many clicks there were
+        // If it's 0, no click was made and onClick was fired by a keypress
+        const focusIndex = event.detail === 0 ? 0 : -1;
+        setInitialFocusIndex(focusIndex);
     }, [visible]);
 
     /**