Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple modals scrolling bug

See original GitHub issue

dimmable dimmed are deleted from body when the second modal is closed

Steps

Scroll modal
Open second modal
Scroll modal
Close second modal
Try to scroll modal

Expected Result

The first modal should be scrollable <body class="dimmable dimmed scrolling">

Actual Result

First Modal is not longer scrollabel <body class="scrolling">

Version

tested in 0.64.0 & 0.63.5

Testcase

https://codepen.io/csxmedia/full/mRVgYX/

Issue Analytics

State:
Created 7 years ago
Reactions:16
Comments:16 (7 by maintainers)

Top GitHub Comments

7reactions

marcdiboldcommented, Jul 7, 2017

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

5reactions

levithomasoncommented, Jan 16, 2017

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?