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

mirko77 · March 2, 2023, 4:16pm

I am creating a modal at run time with

modalController.create(...);

and dismissing it with

modalController.dismiss();

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?

dolthead · March 3, 2023, 5:30am

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

github.com

dolthead/vueTabs/blob/2e0d2960fa4c350cb2c23c638ddcf833a66536de/src/components/SampleModal.vue

<script lang="ts" setup>
    import { modalController, IonPage, IonHeader, IonTitle, IonToolbar, IonButtons, IonButton, IonIcon, IonContent, IonCard, IonCardContent } from "@ionic/vue";
    import { closeCircleOutline } from 'ionicons/icons';
    import { onBeforeMount, onMounted } from "vue";

    onBeforeMount(() => { // when you want to do something before the component is mounted
        console.log('onBeforeMount');
    });

    onMounted(() => { // when you need access to the rendered DOM
        console.log('onMounted');
    });
</script>

<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-title>
                    Page info

This file has been truncated. show original

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

github.com

dolthead/vueTabs/blob/2e0d2960fa4c350cb2c23c638ddcf833a66536de/src/views/Tab1Page.vue

<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonButtons, IonFab, IonFabButton, IonIcon, modalController } from '@ionic/vue';
import { chevronBackOutline } from 'ionicons/icons';
import ExploreContainer from '@/components/ExploreContainer.vue';
import SampleModal from '@/components/SampleModal.vue';

const presentModal = async () => {
  const modal = await modalController.create({
      component: SampleModal,
      breakpoints: [0, 0.65],
      initialBreakpoint: 0.65,
  });
  modal.addEventListener("will-present",() => {
      console.log("will-present");
  });
  modal.addEventListener("did-present",() => {
      console.log("did-present");
  });
  return modal.present();
}

This file has been truncated. show original

mirko77 · March 3, 2023, 3:03pm

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?

mirko77 · March 3, 2023, 4:55pm

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

dolthead · March 3, 2023, 10:03pm

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

mirko77 · March 6, 2023, 2:52pm

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.