You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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):
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:
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):
Is the issue reproducible in Storybook?
Yes... http://airbnb.io/react-dates/?path=/story/daypickersingledatecontroller--with-custom-input
Additional -
Might be a simple fix...
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.
The text was updated successfully, but these errors were encountered: