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

[michael-hein]

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.

screen-20231215-124041.mp4

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

[ohmnoms]

Updating - still seeing this issue on Android devices in Angular Material 17.3.9. Closing the virtual keyboard allows scrolling in the autocomplete. But reopening the keyboard will disable it. Any update on the fix for this? Or any workaround on Android devices?

[grunci]

Hi,
Any ideas why is it working properly on iOS?
Do you have any plans for the fix?

[grunci]

Hi @wagnermaciel , P2 means there is a workaround. Could you please elaborate on that?

[mistrykaran91]

I think by setting hasBackdrop option, this issue can be resolved. Altenatively, you can set backdropClass to give some transparent effect.

#30631

cc: @wagnermaciel @crisbeto