How to focus on a chosen day

[mgibas]

I would like to add a keyboard binding to move focus to today when user presses t on a day-picker - is there any API I could use?

[gpbl]

Supporting the t key for focusing to the today's date is an interesting idea. Is this something common?

A way to implement it is to listen to a keypress on the container:

Example: https://codesandbox.io/p/devbox/c2jlnd

Code:

import React, { useRef, useState } from "react";

import { DayPicker } from "react-day-picker";
import "react-day-picker/style.css";

export default function App() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [month, setMonth] = useState<Date | undefined>(undefined);

  const focusToday = () => {
    if (!containerRef.current) return;
    const todayButton = containerRef.current.querySelector<HTMLButtonElement>(
      "[data-today] button"
    );
    if (todayButton && !todayButton.disabled) {
      todayButton.focus();
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    if (e.key !== "t") return;

    e.preventDefault();

    const todayMonth = new Date();
    todayMonth.setDate(1);
    setMonth(todayMonth);
    requestAnimationFrame(focusToday);
  };

  return (
    <div ref={containerRef} onKeyDown={handleKeyDown}>
      <DayPicker mode="single" month={month} onMonthChange={setMonth} />
    </div>
  );
}