Cannot register modal instance that's already open

See original GitHub issue

When a modal is open, double-clicking on the background overlay results in the modal disappearing then quickly reappearing again with the following warning in the console:

react_devtools_backend.js:6 React-Modal: Cannot register modal instance that's already open 
    at ModalPortal (http://localhost:4500/static/js/0.chunk.js:60569:5)
    at Modal (http://localhost:4500/static/js/0.chunk.js:60212:5)

Additionally, the ReactModal__Body--open class remains on the body after closing the re-opened modal.

Issue Analytics

State:
Created 3 years ago
Comments:24

Top GitHub Comments

8reactions

timothymalchamcommented, Apr 25, 2022

I am now getting this error after upgrading to React 18. Prior to doing the upgrade, I did not see this error: React-Modal: Cannot register modal instance that's already open. Does anybody have any idea of what might have changed?

6reactions

Phanabanicommented, Oct 25, 2022

I was having this error (react-modal@3.15.1, React@18.2.0), and after a lot of frustration found out that my problem was caused by using React.StrictMode in my root element, which apparently double-invokes some lifecycle methods in development mode (not production, though). As of now, this behavior is documented in the StrictMode docs – search for “double-invoking the following functions”.

I found this solution by accident, because I was investigating an effect being called twice and found this answer, which also referenced this answer which has more info about the double rendering of StrictMode.

It seems like this is harmless in my case because the only visible issue is the warning in console (modals are still displaying fine), but if anyone has a suggestion for suppressing the warning, I’d appreciate it! Removing the StrictMode tag stops this issue from happening, but I want to keep the benefits of using strict mode.