Range select focus.

[lariane-guerra]

Hello everyone, it's me again.

Code

<DateRangePickerComponent
  locale={brazilLocale}
  mode={'range'}
  selected={range}
  onSelect={handleSetRangeDateSelected}
  captionLayout="dropdown"
  numberOfMonths={numberOfMonths}
  max={maxRangeInterval}
  defaultMonth={handleDefaultMonth(numberOfMonths)}
  startMonth={startCalendarDate}
  endMonth={handleEndCalendarDate(disabledFuture)}
  disabled={handleDisableFutureDates(disabledFuture, isD1)}
  components={{
    Option: (props) => (
      <option
        {...props}
        style={{
          color: '#1A1A1A',
          fontFamily: 'Inter',
          backgroundColor: '#FFFFFF',
          border: 'none',
        }}
      />
    ),
  }}
/>

export const startCalendarDate = subYears(new Date(), 5)

export function handleDefaultMonth(numberOfMonths: number) {
  if (numberOfMonths === 1) return

  const actualMonth = new Date()
  return subMonths(actualMonth, 1)
}

export function handleEndCalendarDate(disabledFuture?: boolean) {
  if (!disabledFuture) return
  const actualMonth = new Date()

  return endOfMonth(actualMonth)
}

Expected Behavior

I've encountered a potential issue with range navigation.

When I select the start date, it automatically focuses on the current month, which is not ideal. For instance, if I select a date in May, I don't necessarily want to be forced to select a date in the current month.

Example: 05-10-2024 to 05-15-2024.

In the example mentioned, I expect the focus to remain on the month of May.

Actual Behavior

The focus is reverting back to the current month instead of the selected month.

Screenshots

[gpbl]

@lariane-guerra I believe this is because this other bug: #2389

Thanks for your patience - working on that issue!

[lariane-guerra]

@gpbl any news about this?

[gpbl]

@lariane-guerra would you try to see if v9.0.9 has fixed the issue for you? Thanks.