I’m having a weird behavior while using the new v7 ion-checkbox in a ion-modal where the label of the checkbox is not showing after the second open of the modal.
This is the steps my app is taking:
const modal = await this.modalController.create({
SomeComponent,
animated: true,
componentProps,
mode: 'ios',
keyboardClose: true,
backdropDismiss: true,
});
modal.present();
// some-componente.ts:
checkObjs: Array<...> = A_CONST.map((t) => ({ ...t, checked: false }));
// some-component.html:
<ion-item *ngFor="let check of checkObjs">
<ion-checkbox labelPlacement="start" justify="space-between" [(ngModel)]="check.checked">{{ check.label | titlecase }}</ion-checkbox>
<!-- <ion-checkbox labelPlacement="start" justify="space-between" [aria-label]="check.label | titlecase" [(ngModel)]="check.checked"></ion-checkbox> <- doesn't work either -->
</ion-item>
When I first open the modal everything works fine, but when I close and open it again the label is not shown and I get a warning: ion-checkbox now requires providing a label with either the default slot or the "aria-label" attribute. [...].
I tried the same using inline modals but got the same results. I also tried using ion-popover, same thing. Any thoughts? Or could this be a bug?