How to close current modal and open another modal in parallel?

[WenLonG12345]

Hi, thanks for this awesome library, however, I have some problem regarding to closing current modal and open another new one. Here is the example

  const loginModal = showModal(LoginModal, {
    onClose: () => {},
    onRedirectForgetPwd: () => {},
    onRedirectRegister: () => {
      loginModal.hide();
      showModal(RegisterModal)
    },
  });

  const registerModal = showModal(RegisterModal, {
    onClose: () => {},
    onRedirectLogin: () => {
      registerModal.hide();
      showModal(LoginModal)
    },
  });

onRedirectxxx was indicated a callback funnction to trigger modal useState().
How can I archive this working? Any clues?

[Quernest]

Hi, thanks for this awesome library, however, I have some problem regarding to closing current modal and open another new one. Here is the example

  const loginModal = showModal(LoginModal, {
    onClose: () => {},
    onRedirectForgetPwd: () => {},
    onRedirectRegister: () => {
      loginModal.hide();
      showModal(RegisterModal)
    },
  });

  const registerModal = showModal(RegisterModal, {
    onClose: () => {},
    onRedirectLogin: () => {
      registerModal.hide();
      showModal(LoginModal)
    },
  });

onRedirectxxx was indicated a callback funnction to trigger modal useState(). How can I archive this working? Any clues?

Hi @WenLonG12345, thank you for your comment.

But could you make an example on https://codesandbox.io/ ? I tried to do the similar thing and it works well for me. Maybe the problem is with the redirect? Maybe the page is reloaded and the callback doesn't fire?

[WenLonG12345]

Hi @Quernest , I had create a codesandbox that related to my usecase, and also highlight my problem in there. feel free to let me know if there is any doubt. Thanks :) https://codesandbox.io/s/mui-modal-provider-multiple-modal-4psfth?file=/src/App.tsx

[Quernest]

Hi @Quernest , I had create a codesandbox that related to my usecase, and also highlight my problem in there. feel free to let me know if there is any doubt. Thanks :) https://codesandbox.io/s/mui-modal-provider-multiple-modal-4psfth?file=/src/App.tsx

https://codesandbox.io/s/mui-modal-provider-multiple-modal-forked-pl3x5p?file=/src/App.tsx

This code works well for me. You forgot to wrap the app in the ModalProvider. useRef is not necessary to use, it's just for convenience of global access. You can use local const without any problem.

[WenLonG12345]

I disabled the ModalProvider because const will cause infinite loop, and I have no idea why. but I think useRef is the solution that I wanted! Thanks for the guidance! 👍🏻