Customizing Keyboard Navigation

[mhwice]

Currently, we can jump to the next/previous month and year using some predefined keyboard shortcuts. This works well but can be somewhat unintuitive for some users. I wanted to change the default keyboard shortcuts to something I felt was more intuitive: Shift + ArrowLeft/Right for month navigation and Shift + ArrowUp/Down for year navigation.

I was able to accomplish this behavior by overriding the onDayKeyDown callback, implementing a custom DayButton component, and using a setTimeout hack to focus the day in the newly rendered month. Without this hack, when navigating to a new month, no day will be focused and the action cannot be repeated.

With that said, this feels like a lot of extra work and hacking in order to simply change the default keybindings.

So I have three questions:

1. Am I overcomplicating this (i.e., is there an easier way to do what I want)?
2. If there is no better way to accomplish this, is customizing keyboard shortcuts something that can be added in a future version?
3. If there is no official way to do this, can someone point me to the area of the source code where the keyboard shortcuts are defined so I can fork the project and add customization features?

Code that accomplishes what I want in a hacky way:

import React from "react";
import "react-day-picker/dist/style.css";
import { addMonths, addYears, formatISO } from "date-fns";
import { DayButtonProps, DayPicker, Modifiers } from "react-day-picker";

function DayButton(props: DayButtonProps) {
  const { day, modifiers, ...buttonProps } = props;
  const buttonRef = React.useRef<HTMLButtonElement>(null);

  React.useEffect(() => {
    if (modifiers.focused) buttonRef.current?.focus();
  }, [modifiers.focused]);

  return (
    <button
      {...buttonProps}
      onMouseEnter={() => buttonRef.current?.focus()}
      ref={buttonRef}
    />
  );
}

export function Calendar() {
  const [selected, setSelected] = React.useState<Date>();
  const [month, setMonth] = React.useState<Date>(new Date());

  const jumpToMonth = React.useCallback((focusDate: Date) => {
    setMonth(focusDate);
    setTimeout(() => {
      const iso = formatISO(focusDate, { representation: "date" });
      const selector = `td[data-day="${iso}"] button`;
      const btn = document.querySelector<HTMLButtonElement>(selector);
      btn?.focus();
    });
  }, []);

  const onDayKeyDown = React.useCallback((date: Date, _: Modifiers, event: React.KeyboardEvent<Element>) => {
    const { key, metaKey, shiftKey, altKey, ctrlKey } = event;
    if (metaKey || altKey || ctrlKey || !shiftKey) return;
    event.preventDefault();

    if (key === "ArrowLeft") {
      jumpToMonth(addMonths(date, -1));
    } else if (key === "ArrowRight") {
      jumpToMonth(addMonths(date, 1));
    } else if (key === "ArrowUp") {
      jumpToMonth(addYears(date, -1));
    } else if (key === "ArrowDown") {
      jumpToMonth(addYears(date, +1));
    }
  }, [month, jumpToMonth]);

  return <DayPicker
    mode="single"
    month={month}
    onMonthChange={setMonth}
    autoFocus
    onDayKeyDown={onDayKeyDown}
    selected={selected}
    onSelect={setSelected}
    components={{ DayButton }}
  />;
}

[gpbl]

Hey @mhwice, keyboard behavior is handled by these lines:

react-day-picker/src/DayPicker.tsx

Lines 239 to 260 in 5fe362f

	const handleDayKeyDown = useCallback(
	(day: CalendarDay, modifiers: Modifiers) => (e: KeyboardEvent) => {
	const keyMap: Record<string, [MoveFocusBy, MoveFocusDir]> = {
	ArrowLeft: ["day", props.dir === "rtl" ? "after" : "before"],
	ArrowRight: ["day", props.dir === "rtl" ? "before" : "after"],
	ArrowDown: ["week", "after"],
	ArrowUp: ["week", "before"],
	PageUp: [e.shiftKey ? "year" : "month", "before"],
	PageDown: [e.shiftKey ? "year" : "month", "after"],
	Home: ["startOfWeek", "before"],
	End: ["endOfWeek", "after"]
	};
	if (keyMap[e.key]) {
	e.preventDefault();
	e.stopPropagation();
	const [moveBy, moveDir] = keyMap[e.key];
	moveFocus(moveBy, moveDir);
	}
	onDayKeyDown?.(day.date, modifiers, e);
	},
	[moveFocus, onDayKeyDown, props.dir]
	);

It should be straightforward to implement your suggestion, which I find more intuitive as well:

• Shift + ArrowLeft/Right for month navigation
• Shift + ArrowUp/Down for year navigation

If you feel like it, give it a try and open a PR updating the keyMap constant. I'm curious to see if it works - I can give it a look in the next days. Thanks!

[mhwice]

Thanks @gpbl! I gave it a try (#2770) and I think it makes a lot of sense. There are a lot of failing tests, but the keyboard navigation works fine.

[gpbl]

👋 The new keyboard shortcuts are included in v9.8.0. Thanks @mhwice for the suggestion and your work here!