React-datepicker: Add refs to your composite elements

Created on 13 Oct 2015 · 7Comments · Source: Hacker0x01/react-datepicker

You have a nice network of refs set up within each composite, but no way to access the composite itself from outside the tree.

For example, if I wanted to focus the input I can't. It would be nice to be able to do this:

React.findDOMNode(this.refs.datepicker.refs.dateinput.refs.input).focus()

A little ugly, definitely. But if you decide to change classes or the type of element being rendered later my code won't break.

enhancement

Source

probablyup

Most helpful comment

I just figured out a way to focus the input box.

Give the DatePicker a ref, like so:
< DatePicker ref="datePicker"/ >

Then somewhere call:
this.refs.datePicker.handleFocus();

ghost on 5 Nov 2015

❤2

All 7 comments

Second this.

gsheppard on 13 Oct 2015

I would love this feature as well.

ghost on 5 Nov 2015

I just figured out a way to focus the input box.

Give the DatePicker a ref, like so:
< DatePicker ref="datePicker"/ >

Then somewhere call:
this.refs.datePicker.handleFocus();

ghost on 5 Nov 2015

❤2

Does that resolve your issues? Otherwise, I'll be happy to merge a PR if someone could add some refs.

martijnrusschen on 8 Nov 2015

It does for me.

ghost on 9 Nov 2015

@Thomsos your solution definitely works, but doesn't address the issue that we shouldn't be touching the internals of @martijnrusschen's components.

Still think it would be a good idea to add some refs. Will send a PR later on

probablyup on 9 Nov 2015

I am using the datepicker in a functional component where I use it along with redux-form and redux-form doesn't allow me to define ref in a functional component. All I could do is update the source code of this with my bare hands to avoid the error. Can this be made optional instead?