Make DevTools and React Modal play together nicely

[andrejak]

React-modal can throw errors when wrapped in devtools, e.g. in the kanban example.

A quick fix was introduced here, but it probably won't work for all modals: 10f1629

[andrejak]

To be honest, I still don't fully understand this bug. But there are multiple workarounds. The nicest one for the user is probably that we recommend using the appElement attribute for the modal instead of the Modal.setAppElement(...) function, i.e. do this:
<Modal appElement={document.getElementById("modal")} {...props}>
Not this:
Modal.setAppElement("#modal")

In the kanban example, the above code is in a useEffect hook in the Modal component. You'd expect that to run after the component has mounted and there should be a div with the modal id on the page (which is defined somewhere). But for some reason it doesn't seem to see it, and throws an error about it missing. I've tried a couple different ways of rendering the user app but haven't found a better one yet.

Currently the patch for kanban was to add a div with the modal id in the devtools core repo - so another workaround would be to tell users to just stick to that id... But that seems quite janky.

[andrejak]

Encountering a somewhat similar issue with react-select.