Set focus to Datetimepicker programmatically

[izzappel]

Is there a way to set the focus to the Datetimepicker programmatically?

I tried to get the ref of the Datetimepicker wrapper and call focus on that one. But it's not enough. I think I would need to set the focus to the first input element. But I do not have the ref of that.

const reactDatePickerRef = useRef(null);

useEffect(() => {
  if (reactDatePickerRef.current && reactDatePickerRef.current.wrapper) {
    // is not enough, need to call `focus` on first input element
    reactDatePickerRef.current.wrapper.focus();
  }
}, []);

return <ReactDateTimePicker ref={reactDatePickerRef} />;

E.g. having a prop firstInputRef for getting the ref to be able to call focus() would be already helpful.

[wojtekmaj]

Hmm, that's a good one! I tried to continue your way of thinking and used reactDatePickerRef.current.wrapper.querySelector('.react-date-picker__inputGroup__input').focus(); to find a first focusable input. But I think we can both agree it's a horrible way of doing things? Also an undocumented one so I can't guarantee it to be working in future non-breaking versions.

Maybe we should add autoFocus prop to match the native input a little better?

[izzappel]

Exactly. I do not really want to rely on undocumented features.
Having an autoFocus would already be helpful.

But if I could choose I would still like the solution for having the freedom to move the focus to the Datepicker by myself.

One scenario that I have in my mind:

• I have a date filter for which I use the Datepicker. There is a shortcut (e.g. Cmd+F) which moves the focus to that filter input so that the user can filter her/his view by just using the keyboard.
  In this case the autoFocus would not be good enough.

[wojtekmaj]

Hmmm, still I think autoFocus will be worth implementing since it's perfectly applicable.

Related:
wojtekmaj/react-date-picker#208
wojtekmaj/react-time-picker#62

[izzappel]

👍 Cool! autoFocus helps already a lot! 👏
Thank you.

[wojtekmaj]

Out in v2.8.0.

[BobbyWalker]

Couldn't you give the option of passing in an onFocus property, then in your internal code on when you capture the onFocus event, check
if(this.props.hasOwnProperty('onFocus')) this.props.onFocus(e)
And let them do other things they want to do?

[wojtekmaj]

I think you're describing a different problem @BobbyWalker. onFocus would allow people to do things when the user manually focuses the field, and this thread is about allowing autoFocus property to be passed correctly to first input.