bug(Datepicker): Page scrolls when using down arrow in datepicker month-view popup

[teodorachiosa]

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

12.2.13

Description

After the update to Angular 13, the datepicker month view has keyboard interaction issues.

Reproduction

Steps to reproduce:

1. Go to Basic datepicker example on the Material site
2. Open the datepicker by using the datepicker button (using either mouse or keyboard)
3. While in month-view, keep pressing the down arrow key

Expected Behavior

The calendar popup does not move in the page.

Actual Behavior

After a few arrow key presses, the page scrolls and the datepicker popup moves as well.

Environment

• Angular: 13.3.5
• CDK/Material: 13.3.5
• Browser(s): Chrome, Edge
• Operating System: Windows

[crisbeto]

I couldn't get it to happen on my machine. Did you press any specific sequence of keys after you open the datepicker?

[teodorachiosa]

I couldn't get it to happen on my machine. Did you press any specific sequence of keys after you open the datepicker?

No, just the down arrow right after opening the popup.

[teodorachiosa]

I updated the browsers in the original post. It also reproduces on Edge if you keep pressing the down arrow.
No issues found on Firefox.

[arnulf-s]

Same issue with autocomplete:
https://material.angular.io/components/autocomplete/examples

Worked in ver 12:
https://v12.material.angular.io/components/autocomplete/examples

[crisbeto]

Here's what I'm doing on Chrome

Screen.Recording.2022-05-25.at.12.44.56.mov

[teodorachiosa]

Here's what I'm doing on Chrome

Screen.Recording.2022-05-25.at.12.44.56.mov

Maybe the OS make a difference...? I am on Windows.

[volvachev]

Hi, I managed to repeat this behaviour. It happens when you hold down the button for a long time. This can easily be reproduced by slowing down the processor, via the perfomance tab.

This behaviour is described in part here.

[zarend]

Well, this is a tricky one. After the keydown event happens, there is a slight delay before we focus the cell. We wait until after view checked, then focus the active cell in a setTimeout. The setTimeout was added to fix an issue with Voice Over screen reader. That delay might be related to this behavior.

components/src/material/datepicker/calendar-body.ts

Line 222 in 37edbe9

* Adding a 0ms setTimeout seems to fix Voiceover losing focus when pressing PageUp/PageDown