Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
1 task done
teodorachiosa opened this issue May 25, 2022 · 9 comments · Fixed by #24991
Closed
1 task done

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

teodorachiosa opened this issue May 25, 2022 · 9 comments · Fixed by #24991
Assignees
@crisbeto
Labels
area: material/datepicker P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@teodorachiosa
Copy link

teodorachiosa commented May 25, 2022 •
edited
Loading

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.

mat-month-view-expected

Actual Behavior

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

mat-month-view

Environment

  • Angular: 13.3.5
  • CDK/Material: 13.3.5
  • Browser(s): Chrome, Edge
  • Operating System: Windows
@teodorachiosa teodorachiosa added the needs triage This issue needs to be triaged by the team label May 25, 2022
@crisbeto
Copy link
Member

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

@teodorachiosa
Copy link
Author

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
Copy link
Author

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
Copy link

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

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

@crisbeto
Copy link
Member

Here's what I'm doing on Chrome

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

@teodorachiosa
Copy link
Author

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
Copy link
Contributor

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 zarend self-assigned this May 27, 2022
@zarend zarend added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: material/datepicker and removed needs triage This issue needs to be triaged by the team labels May 27, 2022
@zarend
Copy link
Contributor

zarend commented May 27, 2022

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

@crisbeto crisbeto assigned crisbeto and unassigned zarend May 29, 2022
crisbeto added a commit to crisbeto/material2 that referenced this issue May 29, 2022
@crisbeto
fix(material/datepicker): page scrolling for fast keyboard repeat
7c98b07 
In an earlier change we introduced a timeout between when the datepicker is opened and when focus is moved into the current view. This means that the browser has some time to fire another keyboard event before we start preventing their default actions from inside the calendar, potentially allowing the page to be scrolled.

These changes fix the issue by always preventing the default action of navigation keys at the overlay level.

Fixes angular#24969.
crisbeto added a commit to crisbeto/material2 that referenced this issue May 29, 2022
@crisbeto
fix(material/datepicker): page scrolling for fast keyboard repeat
3f128cf 
In an earlier change we introduced a timeout between when the datepicker is opened and when focus is moved into the current view. This means that the browser has some time to fire another keyboard event before we start preventing their default actions from inside the calendar, potentially allowing the page to be scrolled.

These changes fix the issue by always preventing the default action of navigation keys at the overlay level.

Fixes angular#24969.
@crisbeto crisbeto mentioned this issue May 29, 2022
Merged
crisbeto added a commit that referenced this issue Jun 1, 2022
@crisbeto
fix(material/datepicker): page scrolling for fast keyboard repeat (#2…
28cc466 
…4991)

In an earlier change we introduced a timeout between when the datepicker is opened and when focus is moved into the current view. This means that the browser has some time to fire another keyboard event before we start preventing their default actions from inside the calendar, potentially allowing the page to be scrolled.

These changes fix the issue by always preventing the default action of navigation keys at the overlay level.

Fixes #24969.

(cherry picked from commit 4ca4fbd)
crisbeto added a commit that referenced this issue Jun 1, 2022
@crisbeto
fix(material/datepicker): page scrolling for fast keyboard repeat (#2…
4ca4fbd 
…4991)

In an earlier change we introduced a timeout between when the datepicker is opened and when focus is moved into the current view. This means that the browser has some time to fire another keyboard event before we start preventing their default actions from inside the calendar, potentially allowing the page to be scrolled.

These changes fix the issue by always preventing the default action of navigation keys at the overlay level.

Fixes #24969.
crisbeto added a commit that referenced this issue Jun 1, 2022
@crisbeto
fix(material/datepicker): page scrolling for fast keyboard repeat (#2…
2443607 
…4991)

In an earlier change we introduced a timeout between when the datepicker is opened and when focus is moved into the current view. This means that the browser has some time to fire another keyboard event before we start preventing their default actions from inside the calendar, potentially allowing the page to be scrolled.

These changes fix the issue by always preventing the default action of navigation keys at the overlay level.

Fixes #24969.

(cherry picked from commit 4ca4fbd)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 2, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/datepicker P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/datepicker): page scrolling for fast keyboard repeat crisbeto/material2
5 participants
@arnulf-s @crisbeto @zarend @teodorachiosa @volvachev