Ionic 6 modalController.create(), setup() called only once

I am creating a modal at run time with


and dismissing it with


All good, however any subsequent calls to modalController.create(...); will not run the setup() function in my modal component.
I was under the impression that modalController.dismiss(); would unmount the component, but it seems it does not.

Am I missing something?

Take a look at this sample modal that uses onBeforeMount and onMounted to run code whenever it’s presented.

If you are using an inline modal, you can do something like this:

Thanks for your answer.

Funnily enough, if I use the inline modal, everything works as expected. The modal is unmounted when dismissed, so setup() is always called.
To keep the inline modal mounted, there is an extra option to pass: keepContentsMounted.

When using modalController instead, it looks like it is never unmounted, so setup() is called only once.

I am not sure why there is this inconsistency, I would expect to pass the keepContentsMounted boolean to modalController.create() if I wanted to keep my modal component around, like we do for the inline modal.

Maybe @ldebeasi can shed some light?

onMounted() gets called only the first time when using modalController.create()

I still have not found a way to unmount the modal when using modalController

Sorry, I’m not clear without seeing your code. When I use const modal = modalController.create(...); within a button handler, for example, then I am seeing the setup function run in the modal component every time. How are you calling create, and where are you storing the returned HTMLIonModalElement? Maybe it is persisting in your parent component?

In my setup script component, the “top level ts code” becomes the setup script, and it is being executed every time I create and present the modal.

My modal component

1 Like

Thanks for confirming it should work as expected.

I looked into it and it was actually a bug on ionic/vue 6.5.0 → bug: dismissing controller modal doesn't unmount inner component · Issue #26665 · ionic-team/ionic-framework · GitHub

Fixed by upgrading to 6.6.0

All good now, setup() is always called!

Thanks again for your help.