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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions