search

prodo-dev / prodo

Prodo is a React framework to build apps faster.
https://docs.prodo.dev
MIT License
114 stars 5 forks source link

Make DevTools and React Modal play together nicely #98

Open andrejak opened 5 years ago

andrejak commented 5 years ago

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: https://github.com/prodo-ai/prodo/pull/97/commits/10f1629fe9c52cb6baa64f27761bb9483ed0c11c

andrejak commented 5 years ago

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 commented 5 years ago

Encountering a somewhat similar issue with react-select.