Modal DateTime showing up behind Modal - RC1


#1

I have a modal 1 that opens a modal 2. The modal 2 has an ion-datetime and when I click on it, the popup comes up behind Modal 2 as shown.

I tried to reproduce in a plunker but it seems to work fine. If I click the datetime again, it shows on top like expected. I am also having a similar problem when Modal 2 has a Select element on it. The select options show up behind Modal 2.

Modal 1

import { Component } from '@angular/core';
import { ViewController, ModalController } from 'ionic-angular';
import {Modal2Page} from './modal2';

@Component({
  selector: 'page-modal1',
  template: `
    <ion-content>
    <ion-item>
      <ion-label for="postDate">Date:</ion-label>
      <ion-datetime id="postDate" name="postDate" displayFormat="MM/DD/YYYY h:mm A" pickerFormat="MM/DD/YYYY h:mm A"
        [(ngModel)]="mydate"></ion-datetime>
    </ion-item> 
    <button ion-button large color="primary" (click)="openModal2()">Open Modal 2</button>
    </ion-content>
     <ion-footer>
      <button large ion-button (click)="close()">Close</button>
    </ion-footer>
  `
})
export class Modal1Page {
  mydate:string = new Date().toISOString();

  constructor(private viewController: ViewController,
  private modalController:ModalController) { }

  close(){
    this.viewController.dismiss();
  }
  
  openModal2(){
    let modal2 = this.modalController.create(Modal2Page);
    modal2.present();
    
  }
}

Modal 2

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';

@Component({
  selector: 'page-modal2',
  template: `
    <ion-content>
    <ion-item>
      <ion-label for="postDate">Date:</ion-label>
      <ion-datetime id="postDate" name="postDate" displayFormat="MM/DD/YYYY h:mm A" pickerFormat="MM/DD/YYYY h:mm A"
        [(ngModel)]="mydate"></ion-datetime>
    </ion-item> 
    <ion-item>
      <ion-label for="sel">Select:</ion-label>
      <ion-select id="sel" name="sel">
        <ion-option>Item 1</ion-option>
        <ion-option>Item 2</ion-option>
        <ion-option>Item 3</ion-option>
      </ion-select>
    </ion-item>
    </ion-content>
    <ion-footer>
      <button large ion-button (click)="close()">Close</button>
    </ion-footer>
  `
})
export class Modal2Page {
  mydate:string=new Date().toISOString();

  constructor(private viewController: ViewController) { }

  close(){
    this.viewController.dismiss();
  }
}

Does anyone know what might be causing this or if there is an open issue already? I tried to find an open issue but I wasn’t sure exactly how specific it might be in the issue log.