mantinedev
ConfirmModal no longer opens after unmounting the target
What package has an issue
@mantine/modals
Describe the bug
When using openConfirmModal with a target set, after opening the modal and then unmounting the target and remounting it, the modal will no longer open.
Putting the target element outside so it doesn't get unmounted solves the problem, but since the Modal component works correctly, it's probably a bug with ConfirmModal.
What version of @mantine/hooks page do you have in package.json?
5.8.0
If possible, please include a link to a codesandbox with the reproduced problem
https://codesandbox.io/s/nice-panna-w9i8ns?file=/src/App.js
Do you know how to fix the issue
No
Are you willing to participate in fixing this issue and create a pull request with the fix
Yes
Possible fix
No response
This issue still persists in v5.10.5 and v6.
It is related to the fact that the ModalProvider always reuses the same modal instance and only changes its configuration:
https://github.com/mantinedev/mantine/blob/master/src/mantine-modals/src/ModalsProvider.tsx#L220
So in this case you're simply reactivating the last modal. Because the resolved DOM node has gone away in the meantime nothing happens.
However if you display some other modal in the meantime and don't trigger the bug it opens up again just fine: https://codesandbox.io/s/magical-water-u0hdmj?file=/src/App.js
- Click "Open Modal with openConfirmModal" > Close it
- Click "Unmount"
- Click "Mount"
- Click "Open Modal with openConfirmModal and default target" > Close it
- Click "Open Modal with openConfirmModal" > It should now open
Possible solutions:
- Pass
targetas DOMElement instead ofstring(but this is merely a workaround than a real fix) - Make sure
targetgets refreshed when the modal opens (this might be implemented somewhere in the lines ofModalandPortal) - Don't reuse the same modal instance but create a new one for each modal (but pay attention to the transitions - I already broke these once ;))
