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-select placeholder="Select One">
      <ion-select-option value="f">Female</ion-select-option>
      <ion-select-option value="m">Male</ion-select-option>

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';
  tag: 'app-home',
  styleUrl: 'app-home.css',
export class AppHome {
  async openModal() {
    const modal = await modalController.create({
      component: 'app-modal',
    modal.onWillDismiss().then((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
  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