Ionic 6 DateTime Modal Closes Background Modal

Question

I have multiple stacked modals and for some reason when I open the modal that I have for the datetime component the second time, it will close the modal in the background.

Here is my explanation of the issue I'm having: User is looking at a list of players and clicks the Add button to open the 'Add players' Modal which displays a form. From this for the user can open two other modals--1 would be to choose a Team which would open a modal on top of the 'Add Players' modal. This works no problem, I can open and close this modal as many times as I want and 'Add players' modal does not close. The other modal is for the players Birthday--this will open the 'DateTime' modal. The first time I open the modal, the 'Add players' modal does not clos. Let's say I made a mistake and need to change the date and I open the 'DateTime' modal for a second time the 'Add players' modal will close in the background.

players.component.ts:

async openAddPlayerModal() {
  const modal = await this.modalController.create({
    component: AddPlayerComponent,
    swipeToClose: true,
    presentingElement: this.routerOutlet.nativeEl,
  });

  modal.onDidDismiss().then((result) => { 
    console.log('Add Player modal form data:', result.data);
  });

  return await modal.present();
}

add-player-modal.component.ts:

async openChooseTeamModal() {
  const modal: HTMLIonModalElement = await this.modalController.create({
    component: ChooseTeamModalComponent,
    swipeToClose: true,
    presentingElement: await this.modalController.getTop()
  });

  modal.onDidDismiss().then((teamData) => {
    if (teamData.data !== null) {
      this.team = teamData.data;
      this.addPlayerForm.controls['teamId'].setValue(teamData.data.id);
    }
  });

  return await modal.present();
}

async openDateTimeModal() {
  const modal: HTMLIonModalElement = await this.modalController.create({
    component: DatetimeModalComponent,
    swipeToClose: true,
    cssClass: 'datetime-modal',
    presentingElement: await this.modalController.getTop()
  });

  modal.onDidDismiss().then((dateTime) => {
    if (dateTime.data !== null) {
      this.dateTime = dateTime.data;
      this.formattedDate = format(parseISO(this.dateTime), 'MMMM d, yyyy');
      this.addPlayerForm.controls['dateOfBirth'].setValue(dateTime.data);
    }
  });

  return await modal.present();
}

datetime-modal.component.ts

export class DatetimeModalComponent implements OnInit {
  dateValue = format(new Date(), 'yyyy-MM-dd');
  dateTime: any;
  @ViewChild(IonDatetime) datetime: IonDatetime;

  constructor(public modalController: ModalController) { }

  ngOnInit() { }

  async dateChanged(value) {
   await this.modalController.dismiss(value);
  }

  async closeDateTimeModal() {
    const closeDateTimeModal = await this.modalController.dismiss({
      'dismissed': true,
      'dateTimeModal': true
    });
    console.log('closeDateTimeModal', closeDateTimeModal);
  }
 
}

datetime-modal-component.html

<ion-content>
  <ion-datetime 
    #datetime presentation="date" 
    [value]="dateValue" 
    size=cover 
    (ionChange)="dateChanged(datetime.value)" 
    [showDefaultButtons]="true">
  </ion-datetime>
</ion-content>

Like I said above, the 'Add Team' modal works as expected and can be opened and closed as many times as I want without the 'Add Players' modal closing in the background.

Does anyone see some that I have implemented incorrectly?

Any ideas to fix this would be greatly appreciated.

Let me know if I need to include more information.

Answer 1

What is happening: When you open the datetime modal the value of the ion-datetime is set, this triggers the ionChange listener and the dateChanged method. But, since you're using modalController to dismiss the modal and, at this time it has not been injected yet, so it get the modal that is on the top of the stack, in this case the addPlayer.

What you can do: Change how and when you dismiss the datetime modal.

Fix 1 (the simple way):

Put a safeguard at the dateChanged method so it only try to close the modal if the datetime has been set:

datetime-modal.component.ts

async dateChanged(value) {
  if (!this.datetime) return;
  this.modalController.dismiss(value);
}

This will solve the problem but I'm not that familiarized with Angular lifecycle to say if it can be problematic in some cases.

Fix 2 (the 'using inline overlay' way)

Using a combination of the solution above, the IonDatetime method confirm and angular EventEmitter:

import { ViewChild, EventEmitter, Output } from '@angular/core';
import { IonDatetime } from '@ionic/angular';

@ViewChild(IonDatetime) datetime: IonDatetime;
@Output() datetimeChanged: EventEmitter<string> = new EventEmitter();

constructor() {  }

async dateChanged(value) {
  if (!this.datetime) return;
  this.datetimeChanged.emit(value);
  this.datetime.confirm(true); // the true here is to close the overlay in that the datetime is being presented on.
}

add-player-modal.component.html

<ion-button id="trigger-datetime">
  Select DOB
</ion-button>

<ion-modal trigger="trigger-datetime">
  <ng-template>
    <app-datetime-modal (datetimeChanged)="addPlayerForm.controls['dateOfBirth'].setValue($event)"></app-datetime-modal>
  </ng-template>
</ion-modal>

Using this methos you will have to either declare the DatetimeModalComponent in the module of addplayer(or the module of listplayers if addplayer doesn't have a module), or (you should do this) create a module for the datetime modal and import that module in the previously mentioned modules (and any other page's module on which you want to use this modal in). If you don't know how to do that just comment here and I can post something about it. Hope it helps :-)