Skip to content

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

Description

@SaiBalaji202

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions