Trying to implement an Ionic Auto Height Sheet modal in a Vue 3 project (https://ionicframework.com/docs/api/modal#auto-height-sheet). Below is the code I have written.
In ion-tab-button #3, I included id="open-modal". Underneath the ion-tab-button, the modal was added with trigger="open-modal". When clicking on ion-tab-button #3, the modal opens successfully. However, upon closing the modal and trying to reopen it by clicking the ion-tab-button again, the modal does not show up. Moreover, the console displays the following warning:
[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.
How can I ensure that the modal consistently opens and closes every time it's clicked? Additionally, considering the warning message, how do 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>