Fix key changing on unmount

Author: a16n-dev

packages/react-dialog-async/package.json

@@ -2,7 +2,7 @@
   "name": "react-dialog-async",
   "description": "A promise-based way to show dialogs in React",
   "type": "module",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "sideEffects": false,
   "main": "index.js",
   "module": "index.esm.js",

packages/react-dialog-async/src/DialogProvider/DialogProvider.tsx

@@ -45,14 +45,13 @@ const DialogProvider = ({
         return {
           ...state,
           [id]: {
+            ...state[id],
             open: false,
-            dialog: state[id].dialog,
-            data: state[id].data,
+            resolve: undefined,
           },
         };
-      } else {
-        return removeKey(state, id);
       }
+      return removeKey(state, id);
     });
   }, []);
 
@@ -69,6 +68,32 @@ const DialogProvider = ({
           clearTimeout(unmountDelayTimeoutRefs.current[id]);
         }
 
+        function resolveFn() {
+          setDialogState((state) => {
+            if (!state[id]) return state;
+
+            if (state[id].unmountDelay) {
+              if (unmountDelayTimeoutRefs.current[id] !== undefined) {
+                clearTimeout(unmountDelayTimeoutRefs.current[id]);
+              }
+
+              unmountDelayTimeoutRefs.current[id] = setTimeout(() => {
+                setDialogState((state2) => removeKey(state2, id));
+              }, state[id].unmountDelay);
+
+              return {
+                ...state,
+                [id]: {
+                  ...state[id],
+                  open: false,
+                  resolve: undefined,
+                },
+              };
+            }
+            return removeKey(state, id);
+          });
+        }
+
         setDialogState((state) => {
           if (state[id]?.open) {
             resolve(undefined);
@@ -84,15 +109,15 @@ const DialogProvider = ({
               data,
               resolve: (value: any) => {
                 resolve?.(value);
-                hide(id);
+                resolveFn();
               },
               unmountDelay: unmountDelay ?? defaultUnmountDelayInMs,
             },
           };
         });
       });
     },
-    [hide, defaultUnmountDelayInMs],
+    [defaultUnmountDelayInMs],
   );
 
   /**

packages/react-dialog-async/src/DialogProvider/__snapshots__/DialogProvider.test.tsx.snap

@@ -1,15 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`calling  show() mounts the dialog in the DOM 1`] = `
-<DocumentFragment>
-  <div>
-    Hello World!
-  </div>
-</DocumentFragment>
-`;
-
-exports[`calling register() followed by show() followed by hide() unmounts the dialog in the DOM 1`] = `<DocumentFragment />`;
-
 exports[`calling show() followed by hide() unmounts the dialog in the DOM 1`] = `<DocumentFragment />`;
 
 exports[`calling show() mounts the dialog in the DOM 1`] = `

packages/react-dialog-async/src/useDialog.test.tsx

@@ -16,8 +16,14 @@ const TestWrapper = ({ children }: PropsWithChildren) => (
 );
 
 const TestDialog = () => <div>Hello World!</div>;
-const TestDialogWithData = ({ data }: AsyncDialogProps<string>) => (
-  <div>{data}</div>
+const TestDialogWithData = ({
+  data,
+  handleClose,
+}: AsyncDialogProps<string>) => (
+  <div>
+    <button data-testid={'close-btn'} onClick={() => handleClose()}></button>
+    {data}
+  </div>
 );
 
 test('can be called without error', () => {
@@ -129,6 +135,33 @@ test('unmount delay does not delay the promise being resolved', async () => {
   expect(value).toBe(true);
 });
 
+test('unmount delay results in the dialog remaining mounted after being closed', async () => {
+  const message = Date.now().toString(16);
+  const TestComponent = () => {
+    const testDialog = useDialog(TestDialogWithData, {
+      unmountDelayInMs: 1000,
+    });
+
+    useEffect(() => {
+      testDialog.open('Hello World!');
+    }, []);
+
+    return null;
+  };
+
+  render(
+    <TestWrapper>
+      <TestComponent />
+    </TestWrapper>,
+  );
+
+  act(() => {
+    screen.getByTestId('close-btn').click();
+  });
+
+  expect(screen.queryByText(message)).toBeDefined();
+});
+
 test('consumer does not rerender when dialog is opened', async () => {
   // Track the number of renders
   let renderCount = 0;