[Request] Add default to remove modal

[dml0031]

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:

const handleClose = async () => {
  return modal.hide().then(() => modal.remove())
}

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.

[supnate]

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:

nice-modal-react/src/index.tsx

Line 637 in e9c2583

onExited: () => {

[dml0031]

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.

[supnate]

@dml0031 can you create a codesandbox sample?