on-Select is hidden behind Ion Modal

Ionic version:
@ionic/core”: “^5.0.7”,

If I put an ion-select inside an ion-modal , the ion-select disappear behind the modal and it’s impossibile to use.
How this can be fixed?

Do you have a sample that we could look at? Kind of hard to the details without one.

Hi, thank you in advice for your help.

It’s not a specific code…it appears every time that a ion-select it’s inside of an ion-modal…

Note: I’m working on a stencil-ionic pwa project. No angular. I don’t know if can help.

My modal has this structure:

<ion-header class="modal-header"></ion-header>
<ion-content>
<ion-list>
  <ion-item>
    <ion-label>Gender</ion-label>
    <ion-select placeholder="Select One">
      <ion-select-option value="f">Female</ion-select-option>
      <ion-select-option value="m">Male</ion-select-option>
    </ion-select>
  </ion-item>
</ion-list>
</ion-content>

And if I click on the ion-select this it’s behind the modal and can’t interact with it. If I inspect the dom, the ion-select options are behind the ion-modal.

I think that the problem it’s because the ion-modal has “position: absolute”. I’m trying with z-index on the select element but nothing it’s solved.

Can you make a demo so that we can inspect?

I’m not able to provide a live demo (I’m trying to) but this is the project on github

A simple start for ionic-stencil pwa with a modal.

Pretty simple fix

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.

Thank you so much!

I’ve created the modal manually because I followed the method that I saw here in Javascript code.

function presentModal() {
  // create the modal with the `modal-page` component
  const modalElement = document.createElement('ion-modal');
  modalElement.component = 'modal-page';

  // present the modal
  document.body.appendChild(modalElement);
  return modalElement.present();
}

Yeah, we need to update the overlay usage docs here. Can you open an issue on the ionic-docs repo?

sure! I will open an issue.
Thank you so much for your help. Really appreciated!

Have a good day