bug: Ion Select is behind Ion Modal

[BerkeAras]

Bug Report

Ionic version:

[x] 5.x

Current behavior:

ion-select is behind ion-modal.

Expected behavior:

ion-select should be over ion-modal.

Steps to reproduce:

Open a ion-modal on iOS. In this modal open ion-select.

[JEricaM]

I have this problem too. How can be solved?

[gbj]

I'm experiencing this same behavior in one case and not another, which may help point toward a solution. I am building a Stencil component that is imported into an Angular app. When I use the component in the Stencil dev server, the select alert appears over the modal correctly

When I use the component within an Angular app, the select is behind the modal and does not appear. (No image necessary for this one...)

In the Stencil version, ion-modal and ion-alert are siblings

In the Angular version, ion-modal is appended to body, but ion-alert for the select is nested within app-root (venite-app in my case) > ion-app.

Edited to add: When I drag the ion-alert node down into body so it's a sibling of ion-modal, it displays correctly. So I'm wondering whether AlertController should just be appending things to body as ModalController seems to.

[gbj]

I see the advice given by @mhartington here is to import and use modalController instead of manually appending a modal, which is the method in the docs. See issue in the ionic-docs repo here

import { Component, h } from '@stencil/core';
import { modalController } from '@ionic/core';
@Component({
  tag: 'app-home',
  styleUrl: 'app-home.css',
})
export class AppHome {
  async openModal() {
    const modal = await modalController.create({
      component: 'app-modal',
    });
    modal.onWillDismiss().then((x) => {
      console.log(x);
    });

    await modal.present();
  }

TL;DR, don’t create modals manually. Use the built in controllers to do this.

[liamdebeasi]

Hi everyone,

I am not able to reproduce this issue using the latest version of Ionic 6, so it appears to have been fixed. I am going to close this, but let me know if you are still running into issues. Thanks!

[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.