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.

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

Keyboard navigation on calendar view does not prevent page scrolling #195

Open
userquin opened this issue Jan 6, 2021 · 0 comments
Open

Comments

@userquin
Copy link
Contributor

userquin commented Jan 6, 2021

hi @motss, great work, I haven't use it since version 1:

Another change you will need to apply to app-datepicker is to prevent page scrolling on keyup events (only on calendar view): for example, go to your Configurable demo powered by Firebase and increase the screen font size until vertical scroll appears (Crtl ++), then focus a date on the calendar (not in dialog) and just press Arrow Up and Arrow Down moving between months => the page will scroll vertically.

This is because your handler is passive, so you cannot prevent it's propagation (I also tested to focus the target cell with preventScroll: false without success), so I suggest you to change it to not using passive event handler, use keydown instead keyup and prevent it's propagation.

If the dialog is shown on a popop instead on a dialog, it is very fustrating using the keyboard, the page will scroll up and down => just see the new Web Core Vitals concepts from Google (you can see that on chrome devtools on perfomance tab it will appear a new entry called Experience (between Frames and Main), you will see there:

Warning: Cumulative Layout Shifts can result in poor user experiences.

ezgif com-gif-maker

Originally posted by @userquin in #180 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant