Skip to content

bug: ion-alert generated by ion-select is stacked behind active ion-modal #31247

Description

@Mahesh5R

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

When an ion-select with interface="alert" is used inside an active ion-modal, the alert overlay generated by the select can be rendered behind the modal.

The alert exists in the DOM under ion-app, but visually it is hidden behind the modal due to overlay stacking/z-index order.

This makes the select options unusable.

Expected Behavior

The ion-alert generated by ion-select interface="alert" should be presented above the currently active ion-modal, because it is the latest user-triggered overlay.

Steps to Reproduce

Steps to Reproduce

Note: I am currently preparing a minimal StackBlitz/GitHub reproduction and will attach it shortly. The issue can be reproduced with a simple Ionic Angular setup using ion-modal and ion-select with interface="alert".

  1. Create/open a minimal Ionic Angular app.
  2. Add an ion-modal and open it from a page using either ModalController or an inline ion-modal.
  3. Inside the opened modal, add an ion-select with interface="alert".
  4. Add a few ion-select-option values to the select.
  5. Open the modal.
  6. Inside the modal, click/tap the ion-select.
  7. Observe that the select alert/options are rendered behind the modal, or the alert is not visible/interactable even though it exists in the DOM.
  8. Inspect the DOM and compare the computed z-index values of ion-modal and the generated ion-alert.
  9. The generated ion-alert appears to have a lower/equal stacking order than the active ion-modal, causing it to be hidden behind the modal.

Expected Behavior

The ion-alert generated by ion-select interface="alert" should appear above the currently active ion-modal, because it is the latest user-triggered overlay.

Actual Behavior

The generated ion-alert can appear behind the active ion-modal, making the select options hidden or not interactable.

Code Reproduction URL

https://dashboard.ionicframework.com/create-app/189139e9

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (C:\Users**\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.8.12
@angular-devkit/build-angular : 21.0.5
@angular-devkit/schematics : 21.0.5
@angular/cli : 21.0.5
@ionic/angular-toolkit : 11.0.1

Additional Information

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions