React-datepicker: Failure to call .focus() on custom input after selecting a date

Created on 23 Nov 2016  Â·  11Comments  Â·  Source: Hacker0x01/react-datepicker

With a customInput set, where customInput has the <input> element deeply nested, react-datepicker will throw:

Uncaught TypeError: this.refs.input.focus is not a function(…)

after a date is selected.

A simple way to fix this behavior is to skip the .focus() step if customInput was passed.

Not sure what a clean solution would be to better support customInput.

docs wontfix

Most helpful comment

I ended up implementing a focus function in my custom component that focuses the input: http://codepen.io/jochenberger/pen/qqKrPd
That's pretty advanced stuff though, I with it was easier. This should probably go into the documentation.
cc @martijnrusschen

All 11 comments

Can't use SFCs as custom inputs either because they cannot have refs.

I ended up implementing a focus function in my custom component that focuses the input: http://codepen.io/jochenberger/pen/qqKrPd
That's pretty advanced stuff though, I with it was easier. This should probably go into the documentation.
cc @martijnrusschen

Same error here. I think we should be able to overwrite the onFocus like with onBlur or onChange.
I noticed that if I call the e.preventDefault in my own onBlur, i have not this error, but I lose the dateValidation.
So I think that if we use a customInput, we should have the focus event inside our component and we decide if we focus or not, for example in my case I have to change the focus to other element once I selected a date.

We are looking for this update as well. We had to use a custom input for layout/styling requirements and also see this error being thrown.

No updates?

You can fix error if overwrite onBlur event in custom input like <input type="text" onBlur={()=>{}}/>

@stamkov-sc Does not work for me... :(
@jochenberger OK for me :)

@seafarring13 Does your custom input have a focus() method?

This is not working for me, I have a functional component, won't work with this

Verified custom text input does throw this error

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kkras3 picture kkras3  Â·  3Comments

evolve2k picture evolve2k  Â·  3Comments

ericreis picture ericreis  Â·  3Comments

tamitutor picture tamitutor  Â·  3Comments

ali-master picture ali-master  Â·  3Comments