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:
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.
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()insrc/index.tsxcallssetOpen(false)on selection (the default whenshouldCloseOnSelectistrue).setOpen(false)recomputespreSelectionfromcalcInitialState().preSelection, which readsthis.props.selected— but at that point in the call stack,onChangehas only just been fired and the parent hasn't re-rendered with the newselectedprop 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 stalepreSelectionis applied immediately and keyboard focus (tabIndex=0inday.tsx) follows it back to the old date.To Reproduce
Render an inline, controlled
DatePicker:Expected Behaviour
The foucs should retain in the newly selected date.