[Ionic v4.0.0-beta.3] ion-select popover interface hidden by modal (incorrect z-index)

[jaufgang]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.6 (/Users/Joey/.nvm/versions/node/v8.11.3/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.4
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none

System:

   ios-deploy : 1.9.1
   ios-sim    : 5.0.13
   NodeJS     : v8.11.3 (/Users/Joey/.nvm/versions/node/v8.11.3/bin/node)
   npm        : 6.4.0
   OS         : macOS High Sierra
   Xcode      : Xcode 9.4.1 Build version 9F2000

Describe the Bug

When a modal contains an <ion-select interface="popover">, the popover drop-down displaying the options is hidden because the <ion-modal> has a higher z-index than the <ion-popover>

Steps to Reproduce
Steps to reproduce the behavior:

1. Create a component that contains an <ion-select interface="popover">
2. open that component as a modal using modalCtrl.create().then(modal=>modal.present())
3. Navigate in the app to open the modal and then open or tap on the to open up the options popover

Expected Behavior

You should be able to see the popover, but nothing appears. If you hit esc, it will close the modal, and then you can see the popover that was supposed to show up inside the modal. This popover is now orphaned because it's parent <ion-select> got removed with the modal.

Inspecting with dev-tools shows that the following z-indexes get applied in my app:

• <ion-modal> => element.style { z-index: 20003;}
• <ion-popover> => element.style { z-index: 10004;}

[brandyscarney]

Thanks for the issue!

Related to / possible duplicate of #14662

[jaufgang]

Yeah, it certainly looks like it this issue duplicates one of the problems pointed out in #14662, but that issue seems to be on v3.19.0.

I am experiencing this problem on a project after upgrading from v3 to @ionic/angular 4.0.0-beta.3. I did not experience this problem on v3, and it only showed up after upgrading. Since the component library for v4 is a complete rewrite of v3, should v3 issues and v4 issues be tracked separately? Will the Ionic team provide patch releases for v3 bug fixes after v4 is released?

Anyhow, since I'm not sure if it should be closed as a duplicate. I will leave it open, but if you or someone else on the ionic team wants to close and track this through issue #14662 please do so.

[bleuscyther]

You can temporarily fix base on the official commit , with something like :

ion-popover {
    z-index: 20100 !important;
} 

[manucorporat]

Already fixed in master! should be fixed in next release!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.