Open dml0031 opened 8 months ago
Which UI library do you use? You need to call modal.remove()
from the callback like afterHideAnimation
of the Modal component from the UI lib. For example, the built-in muiDialogV5 helper calls modal.remove when onExited
:
export const muiDialogV5 = (
modal: NiceModalHandler,
): { open: boolean; onClose: () => void; TransitionProps: { onExited: () => void } } => {
return {
open: modal.visible,
onClose: () => modal.hide(),
TransitionProps: {
onExited: () => {
modal.resolveHide();
!modal.keepMounted && modal.remove();
},
},
};
};
See the code here: https://github.com/eBay/nice-modal-react/blob/e9c25837e470b41b93375edf955011e524723f52/src/index.tsx#L637
This is the library NextUI
I tried to use onAnimationEnd
for the modal.remove()
call but it was still not removing it from the component tree afterwards.
@dml0031 can you create a codesandbox sample?
I have been using this package for a long time in a lot of projects and recently ive noticed a lot of issues regarding modals mounting and un-mounting especially with forms.
Most UI packages have modals built with open / closing animations and id like to use that closing animation, so if I just call
modal.remove()
the animation is not displayed. Ive tried to do an async call like this:however in that scenario I have noticed that the modals are not actually being removed from the component tree and if I were to open that modal again, the form values still display the values of the previous modal because it did not get removed and re-rendered.