fix(Modal): unmounting nested modals (#321)

hongrich · eddywashere · commit ecf51b2cf1b4 · 2017-02-14T08:59:49.000-08:00
Unmounting nested modals should remove the matching number of
`modal-open` classes from the body node. Previously, the updated class
names were computed before its children are unmounted and only updated
in the DOM afterwards. This can cause `modal-open` class name to be left
on the body if any of its children is also a modal (which is also trying
to remove those `modal-open` classes).
diff --git a/src/Modal.js b/src/Modal.js
@@ -115,14 +115,13 @@ class Modal extends React.Component {
   }
 
   destroy() {
-    const classes = document.body.className.replace('modal-open', '');
-
     if (this._element) {
       ReactDOM.unmountComponentAtNode(this._element);
       document.body.removeChild(this._element);
       this._element = null;
     }
 
+    const classes = document.body.className.replace('modal-open', '');
     document.body.className = mapToCssModules(classNames(classes).trim(), this.props.cssModule);
     setScrollbarWidth(this.originalBodyPadding);
   }
diff --git a/src/__tests__/Modal.spec.js b/src/__tests__/Modal.spec.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { Modal } from '../';
+import { Modal, ModalBody } from '../';
 
 describe('Modal', () => {
   let isOpen;
   let toggle;
 
+  let isOpenNested;
+  let toggleNested;
+
   beforeEach(() => {
     isOpen = false;
     toggle = () => { isOpen = !isOpen; };
+
+    isOpenNested = false;
+    toggleNested = () => { isOpenNested = !isOpenNested; };
+
     jasmine.clock().install();
   });
 
@@ -452,4 +459,27 @@ describe('Modal', () => {
     instance.destroy();
     wrapper.unmount();
   });
+
+  it('should render nested modals', () => {
+    isOpen = true;
+    isOpenNested = true;
+    const wrapper = mount(
+      <Modal isOpen={isOpen} toggle={toggle}>
+        <ModalBody>
+          <Modal isOpen={isOpenNested} toggle={toggleNested}>
+            Yo!
+          </Modal>
+        </ModalBody>
+      </Modal>
+    );
+
+    jasmine.clock().tick(300);
+    expect(wrapper.children().length).toBe(0);
+    expect(document.getElementsByClassName('modal-dialog').length).toBe(2);
+    expect(document.body.className).toBe('modal-open modal-open');
+
+    wrapper.unmount();
+    expect(document.getElementsByClassName('modal-dialog').length).toBe(0);
+    expect(document.body.className).toBe('');
+  });
 });

Original file line number	Diff line number	Diff line change
`@@ -115,14 +115,13 @@ class Modal extends React.Component {`
`115`	`115`	`}`
`116`	`116`
`117`	`117`	`destroy() {`
`118`		`- const classes = document.body.className.replace('modal-open', '');`
`119`		`-`
`120`	`118`	`if (this._element) {`
`121`	`119`	`ReactDOM.unmountComponentAtNode(this._element);`
`122`	`120`	`document.body.removeChild(this._element);`
`123`	`121`	`this._element = null;`
`124`	`122`	`}`
`125`	`123`
	`124`	`+ const classes = document.body.className.replace('modal-open', '');`
`126`	`125`	`document.body.className = mapToCssModules(classNames(classes).trim(), this.props.cssModule);`
`127`	`126`	`setScrollbarWidth(this.originalBodyPadding);`
`128`	`127`	`}`