Open javamaniac opened 7 months ago
This is a real problem, since users are unable to select the right options. This only happens on mobile devices,.
It looks like it happens when the keyboard from the device comes into view... when the keyboard is gone, I'm able to scroll
A temp fix for this issue, add interactive-widget to resizes-content in the meta tag
More info: https://github.com/bramus/viewport-resize-behavior/blob/main/explainer.md#proposal https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
Is this a regression?
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:
Extended Interaction:
External Interaction:
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
Devices tested: