bug: vue modal refs opening 2 modals in stack after navigation

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Menu component on PageOne: Open Menu, Select “Connor Smith” item, then it dismisses modal and routed to Page2.

Menu component on PageTwo: I select the ion-back-button, then open Menu again, then I see the 2nd modal that is blank in the stack on top of the original one.

I do this all the time in Angular, unsure why it is behaving odd with a blank 2nd modal in Vue. I also did notice that upon inspecting the element, it is instantiation the 2nd modal in DOM with a higher index that the original one that was already dismissed.

Expected Behavior

I except to be able to open modal, then dismiss it and navigate to another page, then open it again, it is in a component so it should work just fine this way.

Steps to Reproduce

Menu component on PageOne:

<template>
  <ion-page>
      <ion-header :translucent="true">
      <ion-toolbar>
          <MenuModal/>
          <ion-title>
            PageOne
          </ion-title>
      </ion-toolbar>
      </ion-header>
      <ion-content :fullscreen="true">
      <ion-header collapse="condense">
          <ion-toolbar>
          <ion-title size="large">PageOne</ion-title>
          </ion-toolbar>
      </ion-header>
      </ion-content>
  </ion-page>
  </template>
      
  <script lang="ts">
      import MenuModal from '../components/MenuModal.vue';
      import { defineComponent } from 'vue';
      import {
          IonPage,
          IonHeader,
          IonToolbar,
          IonTitle,
          IonContent,
      } from '@ionic/vue';
  export default defineComponent({
      name: 'PageOne',
      components: {
          IonPage,
          IonHeader,
          IonToolbar,
          IonTitle,
          IonContent,
          MenuModal,
      },
  });
  </script>
  
  <script lang="ts">
  import { menu } from 'ionicons/icons';
  import {
    IonButtons,
    IonMenuButton,
    IonModal,
    IonContent,
    IonLabel,
    IonItem,
    IonList,
    IonBackButton,
   } from '@ionic/vue';
  import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import router from '@/router';
  
  export default defineComponent({
    name: 'MainMenu',
    components: {
        IonButtons,
        IonMenuButton,
        IonModal,
        IonContent,
        IonLabel,
        IonItem,
        IonList,
        IonBackButton,
  },
  methods: {
      async dismiss() {
        await (this.$refs as any).menuModal.$el.dismiss().then(() => {
          router.push('/page2');
        });
      },
    },
  setup() {
    const router = useRouter();
      return { router, menu, };
    },
  });
  </script>

Menu component on PageTwo:

<template>
    <ion-page>
        <ion-header :translucent="true">
        <ion-toolbar>
            <MenuModal/>
            <ion-title>
                PageTwo
            </ion-title>
        </ion-toolbar>
        </ion-header>
        <ion-content :fullscreen="true">
        <ion-header collapse="condense">
            <ion-toolbar>
            <ion-title size="large">PageTwo</ion-title>
            </ion-toolbar>
        </ion-header>
        </ion-content>
    </ion-page>
    </template>
        
    <script lang="ts">
        import MenuModal from '../components/MenuModal.vue';
        import { defineComponent } from 'vue';
        import {
            IonPage,
            IonHeader,
            IonToolbar,
            IonTitle,
            IonContent,
        } from '@ionic/vue';
    export default defineComponent({
        name: 'PageTwo',
        components: {
            IonPage,
            IonHeader,
            IonToolbar,
            IonTitle,
            IonContent,
            MenuModal,
        },
    });
    </script>

Menu to Modal Component:

<template>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-buttons slot="end">
        <ion-menu-button id="open-menu" autoHide="false"></ion-menu-button>
    </ion-buttons>
    <ion-modal ref="menuModal" trigger="open-menu" :initial-breakpoint="0.90" :breakpoints="[0, 0.25, 0.90]">
      <ion-content class="ion-padding">
        <ion-list>
          <ion-item lines="none" @click="dismiss()">
            <ion-label>
              <h2>Connor Smith</h2>
            </ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-modal>
  
  </template>
  
  <script lang="ts">
  import { menu } from 'ionicons/icons';
  import {
    IonButtons,
    IonMenuButton,
    IonModal,
    IonContent,
    IonLabel,
    IonItem,
    IonList,
    IonBackButton,
   } from '@ionic/vue';
  import { defineComponent } from 'vue';
  import { useRouter } from 'vue-router';
  import router from '@/router';
  
  export default defineComponent({
    name: 'MenuModal',
    components: {
        IonButtons,
        IonMenuButton,
        IonModal,
        IonContent,
        IonLabel,
        IonItem,
        IonList,
        IonBackButton,
  },
  methods: {
      async dismiss() {
        await (this.$refs as any).menuModal.$el.dismiss().then(() => {
          router.push('/pagetwo');
        });
      },
    },
  setup() {
    const router = useRouter();
      return { router, menu, };
    },
  });
  </script>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (C:\Users\Admin\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/vue 6.2.6

Utility:

cordova-res : 0.15.4 native-run : 1.7.0

System:

NodeJS : v14.17.0 (C:\Program Files\nodejs\node.exe) npm : 6.14.13 OS : Windows 10

Additional Information

No response

[ceotrammell]

Ah okay I see! Silly me. Apologies for wasting time. Is this transparent in the documentation on ionic or did I overlook that part?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.