Setting custom component results in focus error after selecting a date (this.input ref is null)

[fc]

Steps to reproduce:
Click within the input field, then select a date. Notice the errors appearing in the console.

Here's the repro:
https://codesandbox.io/s/jp60wk9jj3

Error:

Uncaught TypeError: Cannot read property 'focus' of null
    at DayPickerInput.handleOverlayFocus (DayPickerInput.js:390)

Although in my local development environment I get this slightly different error:

DayPickerInput.js:390 Uncaught TypeError: this.input.focus is not a function
    at DayPickerInput.handleOverlayFocus (DayPickerInput.js:390)

In either case, it looks like the ref is null at this line:
https://github.com/gpbl/react-day-picker/blob/master/src/DayPickerInput.js#L371

Setting keepFocus={false} works around the issue.

[gpbl]

Hi @fc yes your component should support a focus method (see docs) or otherwise better set keepFocus to false.

This is not the first time someone is confused by this, I think I should make that feature optional...

[fc]

Thanks!

And curiously enough I did not realize styled-components do not expose the focus method so for those who may come across this in the future, here are docs on setting up a styled-component to expose focus:
https://github.com/styled-components/styled-components/blob/master/docs/tips-and-tricks.md#refs-to-dom-nodes

[gpbl]

Oh I see! Thanks for the heads up about styles-components, I wasn’t aware of that.