I’ve a problem with ionic v7, in particular when the i’ve a modal that i open programmatically.
The first time i open the modal the labels works correctly but when i reopen the modal the labels disappear. I think is a bug
<ion-modal #tasksFilterModal [backdropDismiss]="false">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="clearFilterModal()">
{{ "label.clear" | translate }}
</ion-button>
</ion-buttons>
<ion-title>
{{ "label.filters" | translate }}
</ion-title>
<ion-buttons slot="end">
<ion-button (click)="applyFilterModal()" [strong]="true">
{{ "label.apply" | translate }}
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-item>
<ion-input value="{{ activeInDateFilterStrValue | dateFormat:'short' }}"
label="{{ 'label.active-in-date' | translate }}" labelPlacement="floating"
id="fromDateFilter" class="ion-text-start" readonly>
</ion-input>
<ion-popover trigger="fromDateFilter" size="cover">
<ng-template>
<ion-datetime presentation="date" [(ngModel)]="activeInDateFilterStrValue" [locale]="currentTranslateLocale">
</ion-datetime>
</ng-template>
</ion-popover>
</ion-item>
<ion-item>
<ion-input type="text" name="task-code" label="{{ 'label.task-code' | translate }}" labelPlacement="stacked"
[(ngModel)]="taskCodeFilterStrValue">
</ion-input>
</ion-item>
<ion-item>
<ion-input type="text" name="task-description" label="{{ 'label.task-description' | translate }}" labelPlacement="stacked"
[(ngModel)]="taskDescriptionFilterStrValue">
</ion-input>
</ion-item>
</ion-content>
</ng-template>
</ion-modal>
The following is the code i use to open and close the modal:
@ViewChild('tasksFilterModal', { static: true })
modal: IonModal;
openFilterModal(){
this.modal.present()
}
clearFilterModal(){
this.modal.dismiss(null, 'cancel');
}