ionic-team / ionic-team/ionic-framework

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

Open
#31,247 1 comment 0 reactions 0 assignees View on GitHub
triage
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### 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

Contributor guide

Open the contributing guide

Research direction

Start with the provided Ionic Angular reproduction and inspect the overlay DOM and computed z-index values for ion-modal and the ion-alert created by ion-select interface="alert". Trace how these overlays are presented and verify the fix by opening the select inside an active modal; done means the alert is visible above the modal and its options are interactable.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.