search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.38k stars 6.75k forks source link

bug(dialog): Onscreen keyboard breaks touch input #28535

Open perotom opened 9 months ago

perotom commented 9 months ago

Is this a regression?

The previous version in which this bug was not present was

15.2, Version 15.2 was the last known version we tried. We then upgraded directly to 17.1.2 so I can't say if it worked in 16.

Description

When the onscreen keyboard is shown, touch inputs are not working any longer (somehow simple "clicks" work but scrolling doesn't work). It looks like something is broken with on screen keyboard in dialogs. It works on iOS but not on Android.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-a6nheq?file=src%2Fdialog.example.component.html Steps to reproduce:

  1. Click open dialog
  2. Try to scroll the tag list (works)
  3. Focus input (keyboard opens)
  4. Scroll the whole page while keyboard is open
  5. Try to scroll the tag list (doesn't work, but you can scroll the list if you remember the position on the screen of the tags before the keyboard appeared).

Here is a video of an application: https://github.com/angular/components/assets/3322872/11ade36e-ce76-45f8-b8b2-5ed443e044ac

In the first half of the video, I tried to scroll the two chip lists. You can see the chips are highlighted (simple clicks work) but are not scrolled. Then I scroll the whole page down. Suddenly the scrolling works. It is also strange to note that the ripple effect is present on the Cancel button but actually my finger was scrolling the chip list.

Expected Behavior

Overflow scrollable should work in dialog with and without onscreen keyboard.

Actual Behavior

When the onscreen keyboard is shown, touch inputs are not working any longer (somehow simple "clicks" work but scrolling doesn't work). It looks like something is broken with on screen keyboard in dialogs.

Environment

Tested on:

mmalerba commented 8 months ago

I tested with the provided stackblitz and was not able to reproduce this issue.

Details: Device: Pixel 7 Android Version: 14 Chrome Version: 123.0.6312.40

perotom commented 8 months ago

It is essential to scroll the page when the input is active (keyboard is visible). If the keyboard is not visible it works without problems. I added tested devices and this step to the procedure in the initial report.