As we just discussed in the UX Interest Group Meeting #13
in the PR mentioned above, I will do just the presentational work and then we can decide which approach will trigger it, Redux action or the React confirmable wrapper,
After thinking about it a little bit, I think the wrapper will fail exactly where I got stuck and had to do a workaround in Fixes #32819 - Add Index page template by laviro · Pull Request #8596 · theforeman/foreman · GitHub
Basically, there is a table dropdown and by default when clicking outside of it, it’s being hidden.
In the table scenario, I would like to click on a Delete action, which opens the modal,
but when clicking anywhere on the screen, including on the modal, the dropdown that had open it will do unmount and therefore the confirm modal will unmount too.
This is exactly what will happen if we use GitHub - haradakunihiko/react-confirm: Small library which makes your Dialog component callable. because the logic is happening inside the unmounting component.
I had to handle a complex state to avoid that from happening: Fixes #32819 - Add Index page template by laviro · Pull Request #8596 · theforeman/foreman · GitHub
e.g:
const [open, setOpen] = React.useState(false);
useEffect(() => {
preventDropdownToggle(open);
}, [open, preventDropdownToggle]);
with the Redux approach that won’t happen, because the logic is placed outside of the fragile dropdown component, in the root of the app, and even if it unmounts, the confirm modal will still work with no workaround needed.