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

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).

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);
   }

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('');
+  });
 });