Body class not removed under certain circumstances

[Plygon]

Summary:

If React Modal is mounted and almost immediately unmounted, the body's class is not removed when the modal disappears. If this class is used to prevent scrolling, the body will remain unscrollable forever.

Steps to reproduce:

1. Create a project using React Modal.
2. Add the following component somewhere on the page:

import React, { useEffect, useState } from 'react';
import Modal from 'react-modal';

export const Flash = () => {
   const [hide, setHide] = useState(0);

   useEffect(() => {
       if (!hide) {
           setHide(true);
       }
   }, [hide])

   return <>
       {!hide && <Modal isOpen={true}>
           <div>
               Modal text.
           </div>
       </Modal>}
       Other text
   </>
}

3. Load the page and inspect the body element. Note that it still has the class ReactModal__Body--open even though no modal is open.

Expected behavior:

The body element should not have the class ReactModal__Body--open.

Link to example of issue:

https://codesandbox.io/s/react-modal-unmount-bug-duvib?file=/src/App.js

Additional notes:

This is happens because the example component is unmounting the modal immediately in a useEffect. This causes it to unmount after componentDidMount is called, but before ModalPortal's setState takes effect. So when componentWillUnmount is called on ModalPortal, it does not yet have the open state, so it does not decrement the counter of the className.

[diasbruno]

Hi @Plygon

It's not recommended to use conditional rendering on modal !hide && <Modal ... />.

[Plygon]

Hi @diasbruno,

I completely agree that it doesn't make much sense to conditionally render a modal. The example only does so for simplicity's sake.

A more complete example would have the modal nested in a hierarchy of components. If any of its parent components are quickly mounted and unmounted in a similar way, the same effect will happen.

Of course rendering something and then immediately unmounting it is something that everyone should try to avoid, but it should not permanently affect the page in the event that it accidentally happens somewhere.

[diasbruno]

If the component that contains the modal has a conditional rendering, it's the same problem, unfortunately. (and it's had to debug too).

It would be nice to have the component where it is used (cohesion), but because of this problem, we can't have that (because of the animation). 😞

[diasbruno]

Maybe, we can try something that at least guarantee that those classes are removed.

[Plygon]

Maybe the actions in beforeOpen can be called after the isOpen state is set to true, instead of before. That way it won't add the class until the state is actually set. It at least does the trick at first glance.

I have no clue if that would break something else, but I wanted to offer something instead of just reporting this and dipping!

[diasbruno]

This class is added to remove the scroll and fix the position...not sure if it will help in this case.

[GravityStart]

Hello! this issue has been affecting the site for my company and was wondering if any progress has been made for a fix yet before we try to figure out a workaround.

We have our modal buried in components and are having difficulty trying to figure out the cause of the dismount/mounting. In our use case, we lock the scrolling for the page when the modal is up but under specific use cases, exiting the modal does not remove "overflow-hidden" from the body. We figured the problem is similar to if not what Plygon reported here.

[diasbruno]

@GravityStart This is related to conditional rendering and createPortal. It's not recommended using in this case.

[vadymshymko]

Hi there)
I ran into the same issue that @Plygon and @GravityStart wrote about. I use className ReactModal__Body--open
as a sign that the modal is open. in some cases where the modal is not closed by changing the isOpen property, this className remains.
To fix this I used the following approach:

1. I created a wrapper component

import ReactModal from 'react-modal';

ReactModal.setAppElement('my-app-element-id');

function Modal(props) {
  return <ReactModal {...props} />
}

2. In this component, I added useEffect to the cleanUp function of which I added the following code:

  document.body.classList.remove('ReactModal__Body--open');
  document.getElementById('my-app-element-id')?.removeAttribute('aria-hidden');

Finaly, my code looks like this:

import ReactModal from 'react-modal';

ReactModal.setAppElement('my-app-element-id');

function Modal(props) {
  useEffect(() => {
    return () => {
      // this runs before the component is removed from the UI
      document.body.classList.remove('ReactModal__Body--open');
      document.getElementById('my-app-element-id')?.removeAttribute('aria-hidden');
    }
  }, [])

  return <ReactModal {...props} />
}

export default Modal;

// somewhere in some app page:

import Modal from 'src/components/Modal'

function SomeComponent() {
//...
  <Modal {...someReactModalProps}>
  // ...

And everything seems to be working great. But I'm not sure if this solution is correct, so I'm asking for your opinion)

[vadymshymko]

@diasbruno What do you think of my solution to the problem? Is there anything that I didn't consider or missed (regarding the specifics of the react-modal component)? THX

[diasbruno]

@vadymshymko it's ok as a workaround for the problem, but it should not be handled by the user.

We need to investigate this further. Although, I don't have time to work on this, I can assist if you guys want to give it a try. Just @ me an I'll answer.