fix: Fix click outside not closing all Menu

ariakit · Apr 19, 2020 · 341a250 · 341a250
1 parent a53eafd
commit 341a250
Showing 1 changed file with 40 additions and 9 deletions.
diff --git a/packages/reakit/src/Dialog/__utils/useNestedDialogs.tsx b/packages/reakit/src/Dialog/__utils/useNestedDialogs.tsx
@@ -6,8 +6,10 @@ type DialogRef = React.RefObject<HTMLElement>;
 
 const DialogContext = React.createContext<{
   visible?: boolean;
-  addDialog?: (ref: DialogRef, visible?: boolean) => void;
+  addDialog?: (ref: DialogRef) => void;
   removeDialog?: (ref: DialogRef) => void;
+  showDialog?: (ref: DialogRef) => void;
+  hideDialog?: (ref: DialogRef) => void;
 }>({});
 
 export function useNestedDialogs(dialogRef: DialogRef, options: DialogOptions) {
@@ -17,12 +19,9 @@ export function useNestedDialogs(dialogRef: DialogRef, options: DialogOptions) {
   const [visibleModals, setVisibleModals] = React.useState(dialogs);
 
   const addDialog = React.useCallback(
-    (ref: DialogRef, visible?: boolean) => {
+    (ref: DialogRef) => {
       context.addDialog?.(ref);
       setDialogs((prevDialogs) => [...prevDialogs, ref]);
-      if (visible) {
-        setVisibleModals((prevDialogs) => [...prevDialogs, ref]);
-      }
     },
     [context.addDialog]
   );
@@ -31,25 +30,55 @@ export function useNestedDialogs(dialogRef: DialogRef, options: DialogOptions) {
     (ref: DialogRef) => {
       context.removeDialog?.(ref);
       setDialogs((prevDialogs) => removeItemFromArray(prevDialogs, ref));
-      setVisibleModals((prevDialogs) => removeItemFromArray(prevDialogs, ref));
     },
     [context.removeDialog]
   );
 
+  const showDialog = React.useCallback(
+    (ref: DialogRef) => {
+      context.showDialog?.(ref);
+      setVisibleModals((prevDialogs) => [...prevDialogs, ref]);
+    },
+    [context.showDialog]
+  );
+
+  const hideDialog = React.useCallback(
+    (ref: DialogRef) => {
+      context.hideDialog?.(ref);
+      setVisibleModals((prevDialogs) => removeItemFromArray(prevDialogs, ref));
+    },
+    [context.hideDialog]
+  );
+
   // If it's a nested dialog, add it to context
   React.useEffect(() => {
     if (options.unstable_orphan) return undefined;
-    context.addDialog?.(dialogRef, options.modal && options.visible);
+    context.addDialog?.(dialogRef);
     return () => {
       context.removeDialog?.(dialogRef);
     };
   }, [
     options.unstable_orphan,
     context.addDialog,
     dialogRef,
+    context.removeDialog,
+  ]);
+
+  React.useEffect(() => {
+    if (options.unstable_orphan) return undefined;
+    if (!options.modal) return undefined;
+    if (!options.visible) return undefined;
+    context.showDialog?.(dialogRef);
+    return () => {
+      context.hideDialog?.(dialogRef);
+    };
+  }, [
+    options.unstable_orphan,
     options.modal,
     options.visible,
-    context.removeDialog,
+    context.showDialog,
+    dialogRef,
+    context.hideDialog,
   ]);
 
   // Close all nested dialogs when parent dialog closes
@@ -69,8 +98,10 @@ export function useNestedDialogs(dialogRef: DialogRef, options: DialogOptions) {
       visible: options.visible,
       addDialog,
       removeDialog,
+      showDialog,
+      hideDialog,
     }),
-    [options.visible, addDialog, removeDialog]
+    [options.visible, addDialog, removeDialog, showDialog, hideDialog]
   );
 
   const wrap = React.useCallback(