angular / angular/components

bug(material/autocomplete): Scrolling autocomplete entries does not work when virtual-keyboard is visible

Open
#28,290 4 comments 0 reactions 0 assignees View on GitHub
android area: material/autocomplete P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

When using the mat-autocomplete on a mobile device and the auto-complete is not at the top of the screen. Then the scrolling of the autocomplete does not work or the point where the autocomplete can be scrolled is below the autocomplete.

https://github.com/angular/components/assets/51996054/3acabe93-5328-487a-999c-a2cfe4ea0355

### Reproduction

StackBlitz link: https://material.angular.io/components/autocomplete/examples#autocomplete-optgroup
I was not able to reproduce it at StackBlitz maybe it has something todo with the stucture and the scrolling areas of the page.

Steps to reproduce:
1. Open it on an device with an virtual keyboard
2. click in the autocomplete of "Option groups autocomplete" when its in the bottom part of the screen

### Expected Behavior

Expected to scroll the autocompletion entries whenever the autocompletion entries are visible.

### Actual Behavior

Actual the scrolling does not work as expected.
https://github.com/angular/components/assets/51996054/3acabe93-5328-487a-999c-a2cfe4ea0355

### Environment

- Angular: 17.0.4
- CDK/Material: 17.0.4
- Browser(s): Chrome (120.0.6099.115)
- Operating System (e.g. Windows, macOS, Ubuntu): Android

Contributor guide

Open the contributing guide

Research direction

Start with the StackBlitz autocomplete optgroup example and reproduce the issue on Android Chrome with a virtual keyboard, placing the autocomplete near the bottom of the screen. Compare scrolling when the keyboard is visible and identify the component or overlay entry point involved. Done means the visible autocomplete entries scroll normally in this position.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.