Set focus inside custom component with useController

[dariolongo]

Hi,
I'm trying to set the focus on custom Text component with useController.

my-page.js

const { control } = useForm();
...
<Text name="myfield" control={control} />

Text.js

import React from "react";
import PropTypes from "prop-types";
import { useController } from "react-hook-form";

const Text = (props) => {
  const { name, control } = props;

  const {
    field: { ref, ...rest },
  } = useController({
    name,
    control,
  });

  return (
    <>
      <div
        className="icon"
        onClick={() => {
          // ref.current.focus();
          control._fields[name]._f.ref.focus();
          // ref.focus();
        }}
      >
        {/* {icon} */}
        custom search icon
      </div>
      <input {...rest} id={name} ref={ref} type="text" className={`form-control`} />
    </>
  );
};

Text.propTypes = {
  name: PropTypes.string,
  control: PropTypes.object,
};

export default Text;

1. control._fields[name]._f.ref.focus(); -> works but is not the best solution
2. ref.current.focus(); -> doesn't work (works only adding a useRef but don't focus the field when an error occur without the original ref)
3. ref.focus(); -> doesn't work

There is the setFocus from the useForm hook, but in this way I have to pass the function as a pros to each custom field component.

How can this be done correctly?

Thanks

[bluebill1049]

have you considered using the setFocus method? https://react-hook-form.com/api/useform/setfocus

[dariolongo]

Yes, but unfortunately the setFocus method is in the useForm hook, to use it I should pass the function as props to each custom fields.

[bluebill1049]

are you using the context api?

[dariolongo]

Currently I'm not using context api.
A solution with useFormContext will most likely work, but I need to change every form structure in all project.
There is another kind of suggestion?
Thanks

[leapful]

@dariolongo @bluebill1049

You can use React.useRef to store DOM input element reference then trigger field.ref() callback to register the input element with react-hook-form.

Working demo: https://codesandbox.io/s/usecontroller-forked-r2spth?file=/src/App.tsx

[bluebill1049]

I think the author want to invoke focus without using setFocus method

[f0xw4r3]

@bluebill1049 I think this is what the sandbox is doing
It uses another ref in a controlled component :

ref={(element) => {
          inputRef.current = element;
          field.ref(element);
        }}

then it uses this ref to focus programmatically

<button
        onClick={() => {
          if (inputRef.current) {
            inputRef.current.focus();
          }
        }}
      >
        Focus
      </button>

For me it answer perfectly the question

I'm trying to set the focus on custom Text component with useController.

Thank you @leapful