[fix] keep references of modals when available.

keeping a reference of all modals in order to manage
when to add/remove classes and aria from elements
correctly.

Author: diasbruno

lib/components/Modal.js

@@ -4,6 +4,7 @@ import ExecutionEnvironment from 'exenv';
 import elementClass from 'element-class';
 import ModalPortal from './ModalPortal';
 import * as ariaAppHider from '../helpers/ariaAppHider';
+import * as refCount from '../helpers/refCount';
 
 const renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer;
 
@@ -83,12 +84,17 @@ export default class Modal extends Component {
     this.node = document.createElement('div');
     this.node.className = this.props.portalClassName;
 
+    if (this.props.isOpen) refCount.add(this);
+
     const parent = getParentElement(this.props.parentSelector);
     parent.appendChild(this.node);
     this.renderPortal(this.props);
   }
 
   componentWillReceiveProps (newProps) {
+    if (newProps.isOpen) refCount.add(this);
+    if (!newProps.isOpen) refCount.remove(this);
+
     const currentParent = getParentElement(this.props.parentSelector);
     const newParent = getParentElement(newProps.parentSelector);
 
@@ -101,18 +107,22 @@ export default class Modal extends Component {
   }
 
   componentWillUnmount () {
+    refCount.remove(this);
+
     if (this.props.ariaHideApp) {
       ariaAppHider.show(this.props.appElement);
     }
 
     ReactDOM.unmountComponentAtNode(this.node);
     const parent = getParentElement(this.props.parentSelector);
     parent.removeChild(this.node);
-    elementClass(document.body).remove('ReactModal__Body--open');
+    if (refCount.count() === 0) {
+      elementClass(document.body).remove('ReactModal__Body--open');
+    }
   }
 
   renderPortal (props) {
-    if (props.isOpen) {
+    if (props.isOpen || refCount.count() > 0) {
       elementClass(document.body).add('ReactModal__Body--open');
     } else {
       elementClass(document.body).remove('ReactModal__Body--open');

lib/helpers/refCount.js

@@ -0,0 +1,19 @@
+const modals = [];
+
+export function add (element) {
+  if (modals.indexOf(element) === -1) {
+    modals.push(element);
+  }
+}
+
+export function remove (element) {
+  const index = modals.indexOf(element);
+  if (index === -1) {
+    return;
+  }
+  modals.splice(index, 1);
+}
+
+export function count () {
+  return modals.length;
+}

specs/Modal.spec.js

@@ -112,17 +112,21 @@ describe('Modal', () => {
   });
 
   it('give back focus to previous element or modal.', (done) => {
+    function cleanup () {
+      unmountModal();
+      done();
+    }
     const modal = renderModal({
       isOpen: true,
       onRequestClose () {
-        unmountModal();
-        done();
+        cleanup();
       }
     }, null, () => {});
 
     renderModal({
       isOpen: true,
       onRequestClose () {
+        unmountModal();
         Simulate.keyDown(modal.portal.content, {
           // The keyCode is all that matters, so this works
           key: 'FakeKeyToTestLater',
@@ -175,6 +179,7 @@ describe('Modal', () => {
       preventDefault () { tabPrevented = true; }
     });
     expect(tabPrevented).toEqual(true);
+    unmountModal();
   });
 
   it('supports portalClassName', () => {
@@ -204,26 +209,31 @@ describe('Modal', () => {
   it('overrides the default styles when a custom overlayClassName is used', () => {
     const modal = renderModal({ isOpen: true, overlayClassName: 'myOverlayClass' });
     expect(modal.portal.overlay.style.backgroundColor).toEqual('');
+    unmountModal();
   });
 
   it('supports adding style to the modal contents', () => {
     const modal = renderModal({ isOpen: true, style: { content: { width: '20px' } } });
     expect(modal.portal.content.style.width).toEqual('20px');
+    unmountModal();
   });
 
   it('supports overriding style on the modal contents', () => {
     const modal = renderModal({ isOpen: true, style: { content: { position: 'static' } } });
     expect(modal.portal.content.style.position).toEqual('static');
+    unmountModal();
   });
 
   it('supports adding style on the modal overlay', () => {
     const modal = renderModal({ isOpen: true, style: { overlay: { width: '75px' } } });
     expect(modal.portal.overlay.style.width).toEqual('75px');
+    unmountModal();
   });
 
   it('supports overriding style on the modal overlay', () => {
     const modal = renderModal({ isOpen: true, style: { overlay: { position: 'static' } } });
     expect(modal.portal.overlay.style.position).toEqual('static');
+    unmountModal();
   });
 
   it('supports overriding the default styles', () => {
@@ -234,15 +244,27 @@ describe('Modal', () => {
     const modal = renderModal({ isOpen: true });
     expect(modal.portal.content.style.position).toEqual(newStyle);
     Modal.defaultStyles.content.position = previousStyle;
+    unmountModal();
+  });
+
+
+  it('should remove class from body when no modals opened', () => {
+    renderModal({ isOpen: true });
+    renderModal({ isOpen: true });
+    expect(document.body.className.indexOf('ReactModal__Body--open') > -1).toBe(true);
+    unmountModal();
+    expect(document.body.className.indexOf('ReactModal__Body--open') > -1).toBe(true);
+    unmountModal();
+    expect(document.body.className.indexOf('ReactModal__Body--open') === -1).toBe(true);
   });
 
   it('adds class to body when open', () => {
     renderModal({ isOpen: false });
     expect(document.body.className.indexOf('ReactModal__Body--open') !== -1).toEqual(false);
-
+    unmountModal();
     renderModal({ isOpen: true });
-    expect(document.body.className.indexOf('ReactModal__Body--open') !== -1).toEqual(true);
-
+    expect(document.body.className.indexOf('ReactModal__Body--open') > -1).toEqual(true);
+    unmountModal();
     renderModal({ isOpen: false });
     expect(document.body.className.indexOf('ReactModal__Body--open') !== -1).toEqual(false);
     unmountModal();