angular / angular/components

bug(MAT-AUTOCOMPLETE): on option select on chrome android 13, dropdown collapses without selection

Đang mở
#32,275 4 bình luận 0 reaction 0 người được giao Xem trên GitHub
Accessibility android area: material/autocomplete P2
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

I have am having a bit of an issue with a mat-autocomplete.
I have deployed the code base from `https://stackblitz.com/run?file=src%2Fexample%2Fautocomplete-require-selection-example.html&startScript=start` to `http://resparke-indigo-backup.s3-website-ap-southeast-2.amazonaws.com/` so I can test it on my Android 13 device.
On Android 10, IOS Safari 17, 18 etc, macbook Chrome, it all works good.
But not on Android 13' Chrome.

What I can find from debugging is that when I click it sometimes doesnt select a value but just collapses the soft keyboard.

I created a recording with onclick debug output so you can see which element is clicked:

![Image](https://github.com/user-attachments/assets/b8f33b41-b121-4780-9acf-79a6e1787689)

I am not sure how to debug this, because the example I am using is pure and simple and 100% from angular mat website.
I think the issues is related to the softkeyboard closing which does something with the overlay.

### Reproduction

As mentioned above, the stackblitz example is deployed on `https://app-test.resparke.com` but you would have to run it on an Android 13 tablet , Chrome, with a soft keyboard and see this issue happening

### Expected Behavior

When option is selected, I expect that selection to be recorded.

### Actual Behavior

When I open the test app on `http://resparke-indigo-backup.s3-website-ap-southeast-2.amazonaws.com/`, and I click on the formfield, the dropdown appears and the softkeyboard opens, I select option 2. The soft keyboard closes and no option is selected. When I click again on the formfield, the dropdown appears again and now I can select and option. That seems to be a consistent behaviour on Android 13/Chrome.

### Environment

- Angular: 20.3.x
- CDK/Material: 202.2.12
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Android 13

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

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

Hướng nghiên cứu

Bắt đầu với ví dụ StackBlitz được liên kết tại src/example/autocomplete-require-selection-example.html và tái hiện sự cố trên máy tính bảng Android 13 bằng Chrome khi bàn phím ảo đang mở. So sánh việc chọn tùy chọn 2 với hành vi trên các nền tảng hoạt động được liệt kê. Hoàn tất khi tùy chọn đã chọn được ghi nhận ngay từ lần chạm đầu tiên và menu thả xuống cùng bàn phím hoạt động chính xác.

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ó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/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.