ionic-team / ionic-team/ionic-framework

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

未关闭
#31,247 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
triage
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

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

贡献指南

打开贡献指南

调研方向

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.

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
冷清
描述清晰度
基本清楚
新手友好度
58/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。