bug: datetime intersection observer not firing in modal

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

The datetime component works really fine when I used in the page directly. On the contrary, when I try to open it with an ion-modal the component broke. The datetime seems to display correctly in the modal, and when I select a date of the same month as the current one it works correctly. However, as soon as I want to change the month using the top buttons or the scroll, the component does not update the months in the upper part of the date-picker (in addition, it only lets you advance or go back one month with respect to the current one, both through the upper buttons and through scroll). However, when you start punching on any date the component only advances to the next month.

See the video for a better compression of the problem (sorry for the low quality). In the first seconds when dates relative to the current month were selected it worked, however, as soon as you want to change the month strange behaviors appear:

https://user-images.githubusercontent.com/61509169/135252509-261918c7-d710-4c11-844d-65aa9b760632.mp4

I tried with diffent widths and heigths but I can’t resolve the issue.

Expected Behavior

The datepicker should work the same way inside an ion-modal / popover as it does outside of them.

Steps to Reproduce

• Create a project with the beta 6 of Ionic v6
• Create a container that opens the modal

      <div (click)="openDateModal()" class="container"> Open Date Modal  </div>

• Create the corresponding function to open it

  dateModal: HTMLIonModalElement;

  async openDateModal() {
    this.dateModal = await this.modalCtrl.create({
      component: DatePickerPage,
      cssClass: 'modal-with-transparency',
    });

    this.dateModal.onDidDismiss().then((data) => {
      this.selectedTime = data.data;
    });

    return this.dateModal.present();
  }

• Create a new page with the following code, that will contain the datepicker: html

<div id="background" (click)="dismiss($event)">
  <ion-datetime id="picker" [(ngModel)]="date">
    <ion-buttons slot="buttons">
      <ion-button (click)="confirm()">Done!</ion-button>
    </ion-buttons>
  </ion-datetime>
</div>

css

ion-datetime {
  height: min(60%, 500px);
  width: min(85%, 340px);
}

#background {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

ts

  date: any;
  constructor(private modalCtrl: ModalController) {}

  ngOnInit() {}

  dismiss(e) {
    if (e.target.id == 'background') {
      this.modalCtrl.dismiss();
    }
  }

  confirm() {
    const datetime = <any>document.querySelector('#picker');
    datetime.confirm().then((res) => {
      this.modalCtrl.dismiss(new Date(this.date));
    });
  }

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.17.1 (C:\Users\kikel\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/angular 6.0.0-beta.6 @angular-devkit/build-angular : 12.1.4 @angular-devkit/schematics : 12.1.4 @angular/cli : 12.1.4 @ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.2.3 @capacitor/android : 3.2.3 @capacitor/core : 3.2.3 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.3 native-run : 1.4.1

System:

NodeJS : v14.15.4 (C:\Program Files\nodejs\node.exe) npm : 6.14.10 OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks! I can reproduce this behavior.

[enrique-lozano]

I have made a new video with the problem just in case. At the beginning of the video I ran the application from the repository that I passed previously on the Pixel, and the component fails. However, when reloading the page, if we put the dimensions of another phone like the iPhone X, it does work

https://user-images.githubusercontent.com/61509169/135326598-e13c9fc3-a1f2-4cb3-8b9c-d405a8daa649.mp4