Arrow keys don’t work for selecting a day if the focused day is disabled.

[ilchenkoArtem]

I need a dynamic constraint based on the from date in the range picker. With mouse navigation everything works fine, but when I try to choose a date using the keyboard, the calendar loses focus because the previously focused date is disabled.

Use case:

1. User can select any from date
2. to date should be more then from date

To reproduce

1. Use the keyboard to navigate to a calendar date.
2. Press Enter to select the focused date.
3. Try to select to date by arrow keys

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

export default function Calendar() {
  const [selected, setSelected] = useState<DateRange>();

  return (
    <DayPicker
      animate
      mode="range"
      selected={selected}
      min={1}
      disabled={[{ before: selected?.from }, selected?.from]}
      onSelect={(value, date) => {
        setSelected((prevValue) => {
          if (prevValue?.from && prevValue?.to) {
            return {
              from: date,
              to: undefined,
            };
          }

          return value;
        });
      }}
    />
  );
}

CodeSandbox: https://codesandbox.io/p/sandbox/lv4wfv

Actual Behavior

Arrow keys don’t work to continue selecting the second date.

Expected Behavior

Arrow keys work to continue selecting the to date. The focus should move to the closest available day.

Screenshots

Screen.Recording.2025-11-01.at.13.28.15.mov

[rodgobbi]

Hi @ilchenkoArtem, it loses focus because the from day button gets disabled due to the disabled={[{ before: selected?.from }, selected?.from]} prop, so it is expected behavior.

IMO the correct UX should be to have it enabled, as it's a value selected in the widget.
If an input is disabled, it shouldn't be selectable.

If you pass disabled={[{ before: selected?.from }]}, it works, and looks more correct. Allowing the user to still interact with that day button.