Focus of custom caption is lost

[linor-shtutman]

Bug description

When passing a custom caption element, it probably manages an initial state for the navigation.
As a result, the Date Picker will rerender after navigation and the caption element loses focus.

To reproduce

https://codesandbox.io/s/react-day-picker-8-forked-02co1i

Steps

1. Navigate with tabs to the button (=caption element)
2. Press enter

Expected behavior

The focus should stay on the caption element.

Additional context

We compared the behavior with the old react-day-picker (v7) and in it, the focus stays on the CaptioElement.

[McSam27]

I'm also running into this same issue. Even with a ref set up, the custom caption components do not regain focus. I'm thinking this has to do with the focus context?

[gpbl]

Thanks! I understand the docs for the custom components is not clear :) Adding better docs in #1501.

I see in the code above that the type of the returned function (passed to components: { Caption }) is not correct. I haven't investigated why this causes the DayPicker to render nothing :)

A better approach to the custom component is to pass the component function straight to the components prop. See how the useNavigation hook can be used here to navigate between the months:

https://codesandbox.io/s/react-day-picker-8-forked-bqkeo9?file=/src/App.tsx

import React from 'react';

import { format } from 'date-fns';
import { CaptionProps, DayPicker, useNavigation } from 'react-day-picker';

function CustomCaption(props: CaptionProps) {
  const { goToMonth, nextMonth, previousMonth } = useNavigation();
  return (
    <h2>
      {format(props.displayMonth, 'MMM yyy')}
      <button
        disabled={!previousMonth}
        onClick={() => previousMonth && goToMonth(previousMonth)}
      >
        Previous
      </button>
      <button
        disabled={!nextMonth}
        onClick={() => nextMonth && goToMonth(nextMonth)}
      >
        Next
      </button>
    </h2>
  );
}

export default function App() {
  return (
    <DayPicker
      components={{
        Caption: CustomCaption
      }}
    />
  );
}