ionic-team / ionic-team/ionic-framework

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

Đang mở
#31,247 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
triage
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
58/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.