This draft PR is simply a POC for me to experiement with closing all active modals when a user clicks off of one.
The biggest challenge I'm running into, is that each "modal" maintains a state:
const [isActive, setIsActive] = useState()
And thus, I can't do the naive approach, which is to have a global useEffect on the App.tsx level which then attaches a click event listener to the document, which closes all modals when a user clicks on a non-modal element.
Because, that class is "ripped" off of the react component, but the "isActive" is not changed appropriately, leading to inconsitencies.
My next potential approach is to register all modals globally, using mobX state.
Then, the component itself has no idea if a modal is open or closes, it must use simply use a "toggle" and getIsActive(someIdentifier) to learn if the modal is active or not.
Then when a user clicks on a non-modal element, I can clear that state, and then all components who are referencing that state will have an update cascade.
This feeeeels like over-engineering, but simultaneously, it feeeels like the only way. I'll sleep on thisss... tbd
Description
This draft PR is simply a POC for me to experiement with closing all active modals when a user clicks off of one.
The biggest challenge I'm running into, is that each "modal" maintains a state:
And thus, I can't do the naive approach, which is to have a global
useEffecton theApp.tsxlevel which then attaches a click event listener to the document, which closes all modals when a user clicks on a non-modal element.Because, that class is "ripped" off of the react component, but the "isActive" is not changed appropriately, leading to inconsitencies.
My next potential approach is to register all modals globally, using mobX state.
Then, the component itself has no idea if a modal is open or closes, it must use simply use a "toggle" and getIsActive(someIdentifier) to learn if the modal is active or not.
Then when a user clicks on a non-modal element, I can clear that state, and then all components who are referencing that state will have an update cascade.
This feeeeels like over-engineering, but simultaneously, it feeeels like the only way. I'll sleep on thisss... tbd