How to set up Ionic Auto Height Sheet modal in Vue 3

Issue

I am attempting set up an Ionic Auto Height Sheet modal in a Vue 3 project (https://ionicframework.com/docs/api/modal#auto-height-sheet). See my code below.

On ion-tab-button #3, I added id="open-modal". Below the ion-tab-button, I added the modal with trigger="open-modal". When I click ion-tab-button #3, I am able to open the modal. However, when I close the modal and click the ion-tab-button again, the modal won't re-open. Meanwhile, I get the following warning in the console:

[Ionic Warning]: A trigger element with the ID "open-modal" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on an overlay component. 

What should I do to ensure that the modal opens and closes consistently on every click? Also, based on the warning, how can I make sure that the trigger element is part of the DOM?

<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" href="/tabs/tab1">
          <ion-icon aria-hidden="true" :icon="listOutline" size="large" color="primary" />
        </ion-tab-button>

        <ion-tab-button tab="tab2" href="/tabs/tab2">
          <ion-icon aria-hidden="true" :icon="shuffleOutline" size="large" color="primary"/>
        </ion-tab-button>

        <ion-tab-button tab="tab3" id="open-modal" href="#">
          <ion-icon aria-hidden="true" :icon="menuOutline" size="large" color="primary"/>
        </ion-tab-button>

        <ion-modal trigger="open-modal" :initial-breakpoint="1" :breakpoints="[0, 1]">
          <div class="block">Block of Content</div>
        </ion-modal>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<script setup>
import { 
  IonTabBar, 
  IonTabButton, 
  IonTabs, 
  IonIcon, 
  IonModal,
  IonPage, 
  IonRouterOutlet,
} from '@ionic/vue';
import { 
  shuffleOutline, 
  listOutline,
  menuOutline
} from 'ionicons/icons';
</script>

Solution

ion-tab-bar really wants to set use the router when you press an ion-tab-button. If I change your tab3 to an ion-button like this:

<ion-button id="open-modal" fill="clear">
  <ion-icon aria-hidden="true" :icon="menuOutline" size="large" color="primary"/>
</ion-button>

the modal works in my environment. This avoids triggering the router.

Answered By - MattP