fix(Modal): remove default timeout in modal and backdrop transition (#…

…5837)
react-bootstrap · Jun 3, 2021 · 3824fa3 · 3824fa3
1 parent 785504b
commit 3824fa3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/src/Modal.tsx b/src/Modal.tsx
@@ -231,11 +231,11 @@ const defaultProps = {
 
 /* eslint-disable no-use-before-define, react/no-multi-comp */
 function DialogTransition(props) {
-  return <Fade {...props} />;
+  return <Fade {...props} timeout={null} />;
 }
 
 function BackdropTransition(props) {
-  return <Fade {...props} />;
+  return <Fade {...props} timeout={null} />;
 }
 
 /* eslint-enable no-use-before-define */

diff --git a/test/ModalSpec.js b/test/ModalSpec.js
@@ -265,6 +265,28 @@ describe('<Modal>', () => {
     );
   });
 
+  it('should call `transitionend` before `exited`', (done) => {
+    const increment = sinon.spy();
+    let modal;
+
+    const instance = mount(
+      <Modal
+        show
+        style={{ transition: 'opacity 1s linear' }}
+        onExited={() => {
+          expect(increment.callCount).to.equal(1);
+          modal.removeEventListener('transitionend', increment);
+          done();
+        }}
+      >
+        <strong>Message</strong>
+      </Modal>,
+    );
+    modal = instance.find('.modal').getDOMNode();
+    modal.addEventListener('transitionend', increment);
+    instance.setProps({ show: false });
+  });
+
   describe('cleanup', () => {
     let offSpy;