Semantic-UI-React: Multiple modals scrolling bug

my temporary fix

class ModalTrigger extends React.Component {
  constructor(props) { ... }

  componentWillUpdate() {
    this.fixBody();
  }

  componentDidUpdate() {
    this.fixBody();
  }

  fixBody() {
    const anotherModal = document.getElementsByClassName('ui page modals').length;
    if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
  }

  render() {
    return (
      <Modal ... >
        ...
      </Modal>
    );
  }
}

Yep, this makes sense. I think it is time to consider a stack for managing things like overlays and document level keybindings.

Another example of this issue is pressing ESC. This will close all Dropdowns, Popups, Modals, and anything else that has a document level listener for ESC. Ideally, we’d have a stack of listeners and only the most recent would be invoked and removed. That way, only the top level component unmounts. This would allow opening/closing a Popup inside of a Modal without also closing the Modal.

The stack could also be used here to keep the classes on the body until there were no more page dimmers in the stack.

@jcarbo / @layershifter have you run into needs that would be well served by a stack or top-level Provider component for managing state such as listeners and multiple Portals?

If still not working well with @marcdibold fix, try bellow:

class ModalTrigger extends React.Component {
  constructor(props) { ... }

  fixBody() {
    const anotherModal = document.getElementsByClassName('ui page modals').length;
    if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
  }

  render() {
    return (
      <Modal onUnmount={this.fixBody} ... >
        ...
      </Modal>
    );
  }
}

This commit solves the issue with closing one of modal in presence of others. Unfortunately I don’t know hot to make a PR out of 1 commit only (not the whole branch)

(fix) When modal window unmounts it reverts portal’s original class list, instead of resetting it https://github.com/rasdaniil/Semantic-UI-React/commit/17c19777f59e4b7b1b0976a7bece01e203de5873

PR up in #2010 to fix this issue.