[fixed] Ensure after-open css transitions work in Safari 14 & Mobile Safari

specs/Modal.events.spec.js

@@ -15,20 +15,27 @@ import {
 } from "./helper";
 
 export default () => {
-  it("should trigger the onAfterOpen callback", () => {
+  it("should trigger the onAfterOpen callback", done => {
     const afterOpenCallback = sinon.spy();
     const props = { isOpen: true, onAfterOpen: afterOpenCallback }; 
-    withModal(props, null, () => {});
-    afterOpenCallback.called.should.be.ok();
+    withModal(props, null, () => {
+      requestAnimationFrame(() => {
+        afterOpenCallback.called.should.be.ok();
+        done();
+      });
+    });
   });
 
-  it("should call onAfterOpen with overlay and content references", () => {
+  it("should call onAfterOpen with overlay and content references", done => {
     const afterOpenCallback = sinon.spy();
     const props = { isOpen: true, onAfterOpen: afterOpenCallback }; 
     withModal(props, null, modal => {
-      sinon.assert.calledWith(afterOpenCallback, {
-        overlayEl: modal.portal.overlay,
-        contentEl: modal.portal.content
+      requestAnimationFrame(() => {
+        sinon.assert.calledWith(afterOpenCallback, {
+          overlayEl: modal.portal.overlay,
+          contentEl: modal.portal.content
+        });
+        done();
       });
     });
   });

specs/Modal.spec.js

@@ -347,7 +347,7 @@ export default () => {
     });
   });
 
-  it("overrides content classes with custom object className", () => {
+  it("overrides content classes with custom object className", done => {
     const props = {
       isOpen: true,
       className: {
@@ -357,11 +357,14 @@ export default () => {
       }
     };
     withModal(props, null, modal => {
-      mcontent(modal).className.should.be.eql("myClass myClass_after-open");
+      requestAnimationFrame(() => {
+        mcontent(modal).className.should.be.eql("myClass myClass_after-open");
+        done();
+      });
     });
   });
 
-  it("overrides overlay classes with custom object overlayClassName", () => {
+  it("overrides overlay classes with custom object overlayClassName", done => {
     const props = {
       isOpen: true,
       overlayClassName: {
@@ -371,9 +374,12 @@ export default () => {
       }
     };
     withModal(props, null, modal => {
-      moverlay(modal).className.should.be.eql(
-        "myOverlayClass myOverlayClass_after-open"
-      );
+      requestAnimationFrame(() => {
+        moverlay(modal).className.should.be.eql(
+          "myOverlayClass myOverlayClass_after-open"
+        );
+        done();
+      });
     });
   });
 
@@ -667,12 +673,15 @@ export default () => {
     });
   });
 
-  it("adds --after-open for animations", () => {
+  it("adds --after-open for animations", done => {
     const props = { isOpen: true };
+    const rg = /--after-open/i;
     withModal(props, null, modal => {
-      const rg = /--after-open/i;
-      rg.test(mcontent(modal).className).should.be.ok();
-      rg.test(moverlay(modal).className).should.be.ok();
+      requestAnimationFrame(() => {
+        rg.test(mcontent(modal).className).should.be.ok();
+        rg.test(moverlay(modal).className).should.be.ok();
+        done();
+      });
     });
   });
 

src/components/ModalPortal.js

@@ -222,14 +222,16 @@ export default class ModalPortal extends Component {
       }
 
       this.setState({ isOpen: true }, () => {
-        this.setState({ afterOpen: true });
-
-        if (this.props.isOpen && this.props.onAfterOpen) {
-          this.props.onAfterOpen({
-            overlayEl: this.overlay,
-            contentEl: this.content
-          });
-        }
+        requestAnimationFrame(() => {
+          this.setState({ afterOpen: true });
+
+          if (this.props.isOpen && this.props.onAfterOpen) {
+            this.props.onAfterOpen({
+              overlayEl: this.overlay,
+              contentEl: this.content
+            });
+          }
+        });
       });
     }
   };