Fix period arrow keys hijacking custom-range calendar#6490
Conversation
- On periods with `< >` controls (Today, Month to Date, Last Month, Year to Date, specific day/month/year), the document-level ArrowLeft/ArrowRight listener kept firing while the calendar popover was open, silently shifting the period and closing the calendar. - Suppress that listener whenever a flatpickr calendar is mounted, via a new `isDateRangeCalendarOpen` predicate on `Keybind.shouldIgnoreWhen`. - Added a regression test covering both directions: arrows still shift the period when the calendar is closed, and no longer do so while it's open.
|
1 similar comment
|
There was a problem hiding this comment.
Tested on staging and it does what intended, so approving 👍
I feel like there's another side to actually making it work though -- the calendar doesn't automatically gain focus. For example, if I hit the down arrow right after opening the calendar, it'll start scrolling down the page (browser default). So even though left/right arrow keys are not affecting the rest of the page (which is correct of course), the keypresses are not registered by the calendar itself either. This is the behaviour I've experienced on Chrome and Safari at least.
| expect(screen.getByText('July 2024')).toBeVisible() | ||
|
|
||
| await userEvent.keyboard('c') | ||
| await waitFor(() => |
There was a problem hiding this comment.
This should work fine without the waitFor wrapper. Everything that happens on keypress is synchronous.
|
|
||
| return ( | ||
| <NavigateKeybind | ||
| <Keybind |
There was a problem hiding this comment.
Adding ignore conditions to NavigateKeybind sounds like something we might want to reuse later on, so we could extend the component with a new prop like shouldAlsoIgnoreWhen:
export function NavigateKeybind({
keyboardKey,
type,
navigateProps,
shouldAlsoIgnoreWhen = []
}: {
keyboardKey: string
type: KeyboardEventType
navigateProps: AppNavigationTarget
shouldAlsoIgnoreWhen?: Array<(event: KeyboardEvent) => boolean>
}) {
const navigate = useAppNavigate()
const handler = useCallback(() => {
navigate({ ...navigateProps })
}, [navigateProps, navigate])
return (
<Keybind
keyboardKey={keyboardKey}
type={type}
handler={handler}
shouldIgnoreWhen={[isModifierPressed, isTyping, ...shouldAlsoIgnoreWhen]}
targetRef="document"
/>
)
}So here, we could still keep calling NavigateKeybind, just passing shouldAlsoIgnoreWhen = [isDateRangeCalendarOpen] as an extra prop.
2 participants
Changes
< >controls (Today, Month to Date, Last Month, Year to Date, specific day/month/year), the document-level ArrowLeft/ArrowRight listener kept firing while the calendar popover was open, silently shifting the period and closing the calendar.isDateRangeCalendarOpenpredicate onKeybind.shouldIgnoreWhen.Tests
Changelog
Documentation
Dark mode