[fix] Correct timing of <Modal> onDismiss callback

Close #2558
necolas · Aug 24, 2023 · d8f1b58 · d8f1b58
1 parent ef95fc0
commit d8f1b58
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/packages/react-native-web/src/exports/Modal/ModalAnimation.js b/packages/react-native-web/src/exports/Modal/ModalAnimation.js
@@ -37,6 +37,7 @@ function ModalAnimation(props: ModalAnimationProps): React.Node {
 
   const [isRendering, setIsRendering] = React.useState(false);
   const wasVisible = React.useRef(false);
+  const wasRendering = React.useRef(false);
 
   const isAnimated = animationType && animationType !== 'none';
 
@@ -54,14 +55,18 @@ function ModalAnimation(props: ModalAnimationProps): React.Node {
         }
       } else {
         setIsRendering(false);
-        if (onDismiss) {
-          onDismiss();
-        }
       }
     },
-    [onDismiss, onShow, visible]
+    [onShow, visible]
   );
 
+  React.useEffect(() => {
+    if (wasRendering.current && !isRendering && onDismiss) {
+      onDismiss();
+    }
+    wasRendering.current = isRendering;
+  }, [isRendering, onDismiss]);
+
   React.useEffect(() => {
     if (visible) {
       setIsRendering(true);

diff --git a/packages/react-native-web/src/exports/Modal/__tests__/index-test.js b/packages/react-native-web/src/exports/Modal/__tests__/index-test.js
@@ -309,6 +309,32 @@ describe('components/Modal', () => {
     expect(document.activeElement).toBe(insideElement);
   });
 
+  test('focus is not trapped after closing modal', () => {
+    const { rerender } = render(
+      <>
+        <a data-testid={'outside'} href={'#outside'}>
+          Outside
+        </a>
+        <Modal visible={true} />
+      </>
+    );
+
+    const outsideElement = document.querySelector('[data-testid="outside"]');
+    const onDismissCallback = jest.fn(() => outsideElement.focus());
+
+    rerender(
+      <>
+        <a data-testid={'outside'} href={'#outside'}>
+          Outside
+        </a>
+        <Modal onDismiss={onDismissCallback} visible={false} />
+      </>
+    );
+
+    expect(onDismissCallback).toBeCalledTimes(1);
+    expect(document.activeElement).toBe(outsideElement);
+  });
+
   test('focus is brought back to the element that triggered modal after closing', () => {
     const { rerender } = render(
       <>