WCAG - Keyboard navigation with inline, range selection, showPreviousMonths and openToDate sometimes loses focus

[Bryan-R-Caldwell]

Describe the bug
When a day has keyboard focus and the openToDate does not match the startDate, then keyboard focus is lost on keyboard navigation

To Reproduce

1. Render a component as such:

  const [startDate, setStartDate] = useState<Date | null>(new Date('2025-6-1'))
  const [endDate, setEndDate] = useState<Date | null>(new Date('2025-7-1'))
  const current = new Date('2025-7-1')

  return (
    <DatePicker
      selectsRange
      inline
      showPreviousMonths
      monthsShown={3}
      startDate={startDate}
      endDate={endDate}
      openToDate={current}
      onChange={([start, end]) => {
        setStartDate(start)
        setEndDate(end)
      }}
    />
  )

2. Use the tab key to go to the selected date (2025-6-1)
3. Use the down or right arrow key to go to 6/2 or 6/8 date

Expected behavior
Expected 6/2 or 6/8 to have keyboard focus. (they are shown as having keyboard focus but document.activeElement says body has focus)

Desktop (please complete the following information):

• OS: Windows 11 (26`00.4349)
• Browser: Chrome (138.0.7204.158)
• Version: react-datepicker (8.4.0)

Additional context
The focus does the right thing if using the left, up arrow (i.e. it changes the month i.e. 5/31 or 5/24) and it is only if the navigation would be within the same month as a start date

There is a workaround we are using where we force focus back if it was lost on key down:

onKeyDown={event => {
  setTimeout(() => {
    if (
      event.key !== 'Tab' &&
      event.key !== 'Escape' &&
      document.activeElement === document.body
    ) {
      dateRangeRef.current?.querySelector<HTMLDivElement>('.react-datepicker__day--keyboard-selected')?.focus()
    }
  })
}}

[Bryan-R-Caldwell]

For what it's worth my guess is something around here would explain the current behavior of it working when going to a previous month, but not on the current month

https://github.com/Hacker0x01/react-datepicker/blob/main/src/index.tsx#L1156

[Bryan-R-Caldwell]

Another related note is that if you extend the start date before the first month shown, the calendar will never receive focus.

i.e. setting the start date in the example to '2025-4-1' the calendar will never receive focus by tab.

Not sure if that's worth a separate bug?