onFocus into a controlled react-datepicker not working v7

[oualidmaz]

I'm trying to do autofocus on validation errors using a controlled react-datepicker, but the onFocus not firing

her is my code :

 <Controller
      control={control}
      rules={{ required: "Date required" }}
      name="ReactDatepicker"
      render={({ field: { onChange, onBlur, value, ref } }) => (
        <ReactDatePicker
          onChange={onChange}
          onBlur={onBlur}
          selected={value}
          ref={ref}
          onFocus={() => console.log("Focus")}  // not fired
        />
      )}
  />

Codesandbox :
https://codesandbox.io/s/react-hook-form-focus-forked-itkrz?file=/src/index.js

[thanh-nguyen-95]

<Controller
  control={control}
  rules={{ required: "Date required" }}
  name="ReactDatepicker"
  render={({ field: { onChange, onBlur, name, value, ref } }) => (
    <ReactDatePicker
      name={name}
      onChange={onChange}
      onBlur={onBlur}
      selected={value}
      customInput={<Input inputRef={ref} />} // use custom input to control input field focus
      onFocus={() => console.log('should trigger')} // this is what actually being focus
    />
  )}
/>

This works for me. Ref: https://reactdatepicker.com/#example-custom-input

Edit: I also added name prop. Forgot to mention it

[oualidmaz]

@thanh-nguyen-95 Thanks for the help. I tried it with custom input but it did not work. Here is a code sandbox modified with custom input. BTW did you make it work on RHF v7 ?
https://codesandbox.io/s/react-hook-form-focus-forked-nb0v4?file=/src/index.js

[thanh-nguyen-95]

I used your old CodeSandbox (v7 beta) and modify the code to make it work.

Here's a working version with latest react-hook-form (v7.7.1): https://codesandbox.io/s/react-hook-form-focus-forked-sdk93

Using Input from material-ui works and navtive input doesn't (both v7 beta and latest version). I have no idea why. Maybe try asking it in react-datepicker repo.

[oualidmaz]

Thank you @thanh-nguyen-95.

[leapful]

@oualidmaz

The react-datepicker implement a custom "ref" for its default input element therefore "ref" handling from "react-hook-form" is not triggered. You can set the "ref" from the parent component as a workaround for this case.

Working sample: https://codesandbox.io/s/react-hook-form-focus-forked-yyhsi?file=/src/index.js

[oualidmaz]

Thanks @leapful

[Markus1607]

Thank you soo much. Found this after hours of try and error

[michaelcais]

Thank you so much @leapful

[ZHaas]

This was the solution I needed but didn't know it. Typescript was giving me a red squiggle under "input". Property 'input' does not exist on type 'ReactDatePicker<never, undefined>

I never tested it because it was squiggled... hours I'll never get back. Reading can be helpful sometimes

[khan5115]

For RangeDatePicker still onFocus event is not firing but it is executing for singleDatePicker