ionic-team / ionic-team/ionic-framework

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

Ouverte
#31,247 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
triage
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
58/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.