angular / angular/components

bug(material/autocomplete): Intermittent Scrolling Issue with mat-autocomplete on Mobile Devices

Đang mở
#28,581 3 bình luận 4 reaction 0 người được giao Xem trên GitHub
area: material/autocomplete P3
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

We are experiencing an intermittent but recurring issue with the mat-autocomplete component when accessed via mobile devices. Specifically, when users attempt to scroll through the options presented in the autocomplete dropdown, the scroll action unexpectedly affects the underlying webpage instead of the dropdown list. This behavior disrupts the user's ability to select an option from the autocomplete list and significantly impacts the usability of the component. The issue has been consistently observed across a variety of devices and web browsers, indicating a broader compatibility or event handling problem within the component.

Video Demonstration of the Issue:
https://javamaniac.github.io/angular-autocomplete-example/screen-20240212-143204.mp4

### Reproduction

StackBlitz link: https://stackblitz.com/~/github.com/javamaniac/angular-autocomplete-example

The issue with mat-autocomplete scrolling is intermittent and does not have a consistent reproduction sequence. However, it generally involves interactions with the autocomplete component on a mobile device. Below are steps that have sometimes led to the issue, though it may require repeating certain actions or experimenting with the sequence to observe the problem.

Potential Reproduction Sequences:

Basic Interaction:
1. Open the autocomplete dropdown.
2. Attempt to scroll through the options.

Extended Interaction:
1. Open the autocomplete dropdown.
2. Select any option from the list.
3. Clear the selected option (erase the choice).
4. Attempt to scroll through the options again.

External Interaction:
1. Open the autocomplete dropdown.
2. Click outside the dropdown to close it.
3. Re-open the dropdown.
4. Attempt to scroll through the options.

Note: The issue may not manifest on the first attempt and could require varying the sequence of actions, such as selecting and clearing choices multiple times or opening and closing the dropdown before scrolling attempts are made. The problem appears to be more likely to occur after interacting with the dropdown in some way (selecting options, erasing choices, or clicking outside the dropdown) before attempting to scroll through the options again.

### Expected Behavior

Dragging (scrolling) within the mat-autocomplete dropdown should scroll through the autocomplete options.

### Actual Behavior

Attempting to scroll through the autocomplete options results in the page itself scrolling.

### Environment

- Angular: 16, 17 (issue likely affects older versions as well)
- CDK/Material: 16, 17
- Browser(s): Chrome, Edge, Safari
- Operating System (e.g. Windows, macOS, Ubuntu): Android, iOS

Devices tested:
- Google Pixel 6 (Chrome, Edge)
- iPhone SE (Chrome, Safari)

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 bản tái hiện StackBlitz được liên kết và thao tác mat-autocomplete được mô tả trong issue, đồng thời kiểm thử các trình duyệt di động và thiết bị được liệt kê. Bản sửa được xem là hoàn tất khi thao tác cuộn hoặc kéo bên trong dropdown đang mở luôn di chuyển các tùy chọn của nó thay vì trang bên dưới, kể cả sau khi chọn, xóa, đóng và mở lại dropdown.

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
Cần làm rõ
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.