Closing a nested modal renderes the parent unscrollable (if body.classList is used)

[kraenhansen]

• components: Modal
• reactstrap version #6.4.0
• import method es
• react version #16.4.0
• bootstrap version #4.1.3

What is happening?

1. Open a modal with a lot of text, which produce a scrollbar.
2. Open another modal within the first modal.
3. Perform any unrelated operation on the document.body.classList.
4. Close the second modal again.
5. Observer how the first modal is no longer scrollable.

I am using Reactstrap in an app that also uses react-draggable. The latter uses the document.body.classList.remove as it's trying to remove an unrelated class from body when I click close. A side-effect of this is that duplicate classes are removed from the body element and this breaks the Modal component. I don't think the Modal component can assume that other components won't be modifying the body classes using the APIs available.

What should be happening?

I would expect to be able to scroll the initial modal after closing the second modal, even if another module manipulated the document.body.classList.

I suggest the Modal component class keeps a static numeric member (or perhaps a number scoped to the module) of how many modals are currently open and only adds a single modal-open class and removes this when the last modal closes.

Steps to reproduce issue

See "What is happening?".

Code

https://stackblitz.com/edit/reactstrap-pv5c4i?file=Example.js

import React, { Component } from 'react';
import { Button, Modal, ModalBody } from 'reactstrap';

const texts = (new Array(100)).fill("A lot of text ...", 0, 99);

class Example extends Component {
  state = { isSecondOpen: true };

  render() {
    return (
      <Modal isOpen={true}>
        <ModalBody>
          {texts.map((text, i) => <p key={i}>{text}</p>)}
          <Modal isOpen={this.state.isSecondOpen}>
            <ModalBody>
              <Button onClick={this.onAddUnrelatedClass}>
                Add an unrelated class using document.body.classList
              </Button>
              <hr />
              <Button onClick={this.onCloseSecond}>
                Close second Modal
              </Button>
            </ModalBody>
          </Modal>
        </ModalBody>
      </Modal>
    )
  }

  onCloseSecond = () => {
    this.setState({ isSecondOpen: false });
  };

  onAddUnrelatedClass = () => {
    // Let's add an unrelated class just like "react-draggable" removes a class
    document.body.classList.add("an-unrelated-class");
  };
}

export default Example;