React-dates: Event when clicking date inputs

[NathanCH]

This question is relevant to react-dates but any third party components we use in our projects.

I want to bind an event to the inputs (#startDate, #endDate) but react-dates doesn't reveal an onClick prop or a ref for these inputs.

How does one bind an event to a DOM element inside a 3rd party component? Typically you'd just select the element by ID and bind an event, but that's not possible in React as far as I know.

Any feedback would be awesome, been stuck on this for hours. I must be missing something.

[timhwang21]

I've ran into this issue before as well, a temporary workaround would be to check when the focused element changes (which you have to store in state and pass to the date picker anyways). You won't be able to have access to "incomplete" dates that are typed with this approach, though.

Addressing your more general React question, you can do this via ref callbacks.

[NathanCH]

Thanks for your quick response.

So now I really think I'm misunderstanding something because I keep getting the same answer about using refs and callbacks.

With react-dates, how do I add a ref to either of the start/end inputs? I understand how to do this when it's my own component, but not with a 3rd party component.

[majapw]

Hi @NathanCH, in general you can't access the ref of an installed 3rd-party package unless that package has explicitly exposed the ref. In particular, in react-dates, we try not to expose refs on our individual dom elements/components to maintain isolation of our components and not have any unexpected side-effects. Instead, we expose explicit callbacks (like onFocusChange and onDatesChange) that allow you to do something when a particular action takes place.

If you really want to select the id and do a thing, our inputs do have ids (in fact you can set them yourself) which you can then select on and do whatever. This is... however... a bad pattern in react and not recommended.

Can you explain a little bit about what you are trying to do in this event handler and maybe we can guide you to using a prop that would suit your usecase better?

[NathanCH]

Hi @majapw, thanks for taking the time to explain this to me. What you've said about component isolation makes sense.

I'll quickly show you what I'm trying to do, and the solution I came up with.

I have a select which allows users to choose predefined date ranges, or a custom date range. While the predefined date ranges are selected, I've disabled the react-dates inputs.

---

What I wanted to do was enable the react-dates inputs when they are clicked like this:

I think you could make the argument that the inputs should not be disabled in the first place, and this issue is moot. But I wanted to make sure I understood the limitations of 3rd party components so I created this thread.

As you can see in my gif I did get it to work by using findDOMNode, but from what I've been reading this will be deprecated soon. Further, I'm not actually selecting the inputs with findDOMNode, it just happens to work in my case.

ReactDOM.findDOMNode(this).addEventListener('click', this.props.clickInput)

Edit: Feel free to close this if you feel it's off topic.

[timhwang21]

You could wrap the inputs with a <div/> that has a click handler which sets state.isFocused which will open the calendar, maybe?