fix: Fix MenuDisclosure race condition on focus/click

ariakit · Apr 13, 2019 · 8a37d31 · 8a37d31
1 parent c64cf25
commit 8a37d31
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/packages/reakit/src/Menu/MenuDisclosure.ts b/packages/reakit/src/Menu/MenuDisclosure.ts
@@ -24,17 +24,29 @@ export function useMenuDisclosure(
 ) {
   const parent = React.useContext(MenuContext);
   const ref = React.useRef<HTMLElement>(null);
+  // This avoids race condition between focus and click.
+  // On some browsers, focus is triggered right before click.
+  // So we use it to disable toggling.
+  const [hasShownOnFocus, setHasShownOnFocus] = React.useState(false);
 
   options = unstable_useOptions("useMenuDisclosure", options, htmlProps);
 
   const dir = options.placement ? options.placement.split("-")[0] : undefined;
 
+  // Restores hasShownOnFocus state when it's closed
+  React.useEffect(() => {
+    if (!options.visible) {
+      setHasShownOnFocus(false);
+    }
+  }, [options.visible]);
+
   htmlProps = mergeProps(
     {
       ref,
       "aria-haspopup": "menu",
       onFocus: () => {
         if (parent && parent.orientation === "horizontal") {
+          setHasShownOnFocus(true);
           options.show();
         }
       },
@@ -95,7 +107,7 @@ export function useMenuDisclosure(
     {
       ...options,
       toggle:
-        parent && parent.orientation !== "horizontal"
+        parent && (parent.orientation !== "horizontal" || hasShownOnFocus)
           ? options.show
           : options.toggle
     },