Keyboard-selecting a date in `inline` mode moves focus back to the previously selected date

Author: SaiBalaji202Created Jul 7, 2026Updated Jul 7, 2026

Describe the bug

When using <DatePicker inline /> and selecting a date via the keyboard (arrow keys + Enter), the new date is selected correctly, but DOM focus jumps back to the previously selected date instead of staying on the newly selected one — as long as that previous date is still visible in the current month view.

This happens because handleSelect() in src/index.tsx calls setOpen(false) on selection (the default when shouldCloseOnSelect is true). setOpen(false) recomputes preSelection from calcInitialState().preSelection, which reads this.props.selected — but at that point in the call stack, onChange has only just been fired and the parent hasn't re-rendered with the new selected prop yet, so this reads the stale, previously selected date. For popup calendars this is harmless because the calendar unmounts when it closes, but inline calendars never unmount, so the stale preSelection is applied immediately and keyboard focus (tabIndex=0 in day.tsx) follows it back to the old date.

To Reproduce

Render an inline, controlled DatePicker:

javascript
function App() {
  const [selectedDate, setSelectedDate] = useState(new Date("2024-06-05"));
  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      inline
    />
  );
}

Expected Behaviour

The foucs should retain in the newly selected date.

Source: Hacker0x01/react-datepicker