Merge 848513e into c9d8e2d

reactjs · Jan 15, 2021 · 589f022 · 589f022
2 parents c9d8e2d + 848513e
commit 589f022
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 25 deletions.
diff --git a/specs/Modal.events.spec.js b/specs/Modal.events.spec.js
@@ -19,19 +19,25 @@ import {
 export default () => {
   afterEach("Unmount modal", emptyDOM);
 
-  it("should trigger the onAfterOpen callback", () => {
+  it("should trigger the onAfterOpen callback", done => {
     const afterOpenCallback = sinon.spy();
     renderModal({ isOpen: true, onAfterOpen: afterOpenCallback });
-    afterOpenCallback.called.should.be.ok();
+      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 modal = renderModal({ isOpen: true, onAfterOpen: afterOpenCallback });
 
-    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();
     });
   });
 

diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
@@ -293,7 +293,7 @@ export default () => {
       .should.be.ok();
   });
 
-  it("overrides content classes with custom object className", () => {
+  it("overrides content classes with custom object className", done => {
     const modal = renderModal({
       isOpen: true,
       className: {
@@ -302,11 +302,14 @@ export default () => {
         beforeClose: "myClass_before-close"
       }
     });
-    mcontent(modal).className.should.be.eql("myClass myClass_after-open");
-    unmountModal();
+    requestAnimationFrame(() => {
+      mcontent(modal).className.should.be.eql("myClass myClass_after-open");
+      unmountModal();
+      done();
+    });
   });
 
-  it("overrides overlay classes with custom object overlayClassName", () => {
+  it("overrides overlay classes with custom object overlayClassName", done => {
     const modal = renderModal({
       isOpen: true,
       overlayClassName: {
@@ -315,10 +318,13 @@ export default () => {
         beforeClose: "myOverlayClass_before-close"
       }
     });
-    moverlay(modal).className.should.be.eql(
-      "myOverlayClass myOverlayClass_after-open"
-    );
-    unmountModal();
+    requestAnimationFrame(() => {
+      moverlay(modal).className.should.be.eql(
+        "myOverlayClass myOverlayClass_after-open"
+      );
+      unmountModal();
+      done();
+    });
   });
 
   it("supports overriding react modal open class in document.body.", () => {
@@ -578,11 +584,14 @@ export default () => {
     appElement.getAttribute("aria-hidden").should.be.eql("true");
   });
 
-  it("adds --after-open for animations", () => {
+  it("adds --after-open for animations", done => {
     const modal = renderModal({ isOpen: true });
     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();
+    });
   });
 
   it("adds --before-close for animations", () => {

diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
@@ -214,14 +214,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
+            });
+          }
+        });
       });
     }
   };