ionic-team / ionic-team/ionic-framework

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

Offen
#31,247 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
triage
Vorherrschende Sprache
TypeScript
Sterne
52.7k
Forks
13.3k
Ø Merge
1 T. 15 Std.
Gemergte PRs (30 T.)
51

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Ruhig
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
58/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.