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

Multiple arrow key presses in calendar causes page/scrollable element to scroll. #2055

Open
JohnC-80 opened this issue Oct 23, 2020 · 0 comments · May be fixed by #2057
Open

Multiple arrow key presses in calendar causes page/scrollable element to scroll. #2055

JohnC-80 opened this issue Oct 23, 2020 · 0 comments · May be fixed by #2057
Labels
pull request wanted This is a great way to contribute! Help us out :-D

Comments

@JohnC-80
Copy link

react-dates version
react-dates@21.8.0

Describe the bug
With the calendar days in focus, pressing up/down arrow keys quickly will cause the entire page to scroll.

Source code (including props configuration)
Steps to reproduce the behavior:

  1. go to:
    http://airbnb.io/react-dates/?path=/story/daypickersingledatecontroller--with-custom-input
    This page has lengthy content in the example div, so it should be in a state where scrolling is required.
    2 Tab into the calendar with keyboard and then rapidly press up/down arrow keys as if you're trying to navigate quickly through the days... the page/div will scroll, perhaps every 3rd or 4th keypress.

Most of the key presses are caught, but (perhaps in the throttle?) some slip through and cause the default scrolling behavior to occur.

If you have custom methods that you are passing into a react-dates component, e.g. onDatesChange, onFocusChange, renderMonth, isDayBlocked, etc., please include the source for those as well.

Screenshots/Gifs
If applicable, add screenshots or gifs to help explain your problem.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser Chrome
  • Version 86.0.4240.111

Is the issue reproducible in Storybook?
Yes... http://airbnb.io/react-dates/?path=/story/daypickersingledatecontroller--with-custom-input

Additional -
Might be a simple fix...

if (e.key !== 'Tab') e.preventDefault();

within the condional block at https://github.com/airbnb/react-dates/blob/master/src/components/DayPicker.jsx#L429-L431 before to the throttledKeyDown call...
I haven't fully tested it, but this seemed to fix the issue in a local modification.
Might need expansion if other keys should be allowed.

@ljharb ljharb added the pull request wanted This is a great way to contribute! Help us out :-D label Oct 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pull request wanted This is a great way to contribute! Help us out :-D
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants