fix(MenuList): emit click event on keydown

LexSwed · Oct 4, 2020 · 0d4424e · 0d4424e · vercel · Oct 4, 2020
1 parent f7c8bcc
commit 0d4424e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/src/lib/Menu/MenuList.tsx b/src/lib/Menu/MenuList.tsx
@@ -86,13 +86,13 @@ function useMenuProps({ placement = 'bottom-start', offset = 8, ...props }: Prop
 
   const selectItem = useCallback(
     (li: HTMLLIElement) => {
-      if (!onAction) return;
-      const action = stateRef.current.items.get(li)?.action;
-      if (action) {
-        onAction(action);
-      } else {
-        li.click();
+      if (onAction) {
+        const action = stateRef.current.items.get(li)?.action;
+        if (action) {
+          return onAction(action);
+        }
       }
+      li.click();
     },
     [onAction, stateRef]
   );

diff --git a/src/pages/components/Menu.mdx b/src/pages/components/Menu.mdx
@@ -35,16 +35,16 @@ You can modify `offset` and [`placement`](https://popper.js.org/docs/v2/construc
 <Playground>
   <ThemeProvider theme="black">
     <Box css={{ p: '$8' }}>
-      <Menu onAction={typeof window !== 'undefined' ? window.alert : null}>
+      <Menu>
         <Menu.Button>
           <span>Open menu</span>
           <Icon as={HiChevronDown} size="lg" />
         </Menu.Button>
         <Menu.List offset={0} placement="right-start">
-          {Array(500)
+          {Array(20)
             .fill(null)
             .map((el, i) => (
-              <Menu.Item key={i} action={`Item ${i}`}>
+              <Menu.Item key={i} onClick={() => window.alert(i)}>
                 Item {i}
               </Menu.Item>
             ))}