5.2.1 broken in React 17 on Chromium

[MoltenCoffee]

Bug report

Describe the bug

In the newest React (17.x), release 5.2.1 broke on Chromium browsers. When closing the modal via the closeIcon or the esc key, React throws: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?

This does not happen when closing the modal by clicking the overlay.

To Reproduce

Forked codesandbox: https://codesandbox.io/s/react-responsive-modal-forked-c5xmg

This sandbox uses React 17.0.1 and this package 5.2.1.

System information

• Version of react-responsive-modal: 5.2.1
• Version of react: > 17.x
• Browser version: Tested in Chrome 86, Edge 85, Brave 1.16.68, Firefox 82

[TylerAuer]

I'm getting the same error using React 16.14.0 but only when clicking on the close icon. Also using 5.2.1 of react-responsive-modal.

The error also occurs when I update the component's state for the open prop.

[MoltenCoffee]

It seems to be react-dom, not react itself that interacts with 5.2.1 in a weird way.

I get a console error with 16.14.0 as well:

Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. Instead, have the parent component update its state and rerender in order to remove this component.

This error seems to appear even without doing anything. However, it's not a 'full screen' error like with 17.x.

[TylerAuer]

Below is the error message I am receiving. It seems like the issue is triggering when handleAnimationEnd calls handleClose. Not sure if this is helpful or not.

[pradel]

Hey all, thanks for reporting the issue, it was a regression introduced by #434. I am planning to add E2E test in the next major version that will help to prevent such things to happen. It is now fixed in v5.2.6 :)

[TylerAuer]

Awesome! Really appreciate it.