Controlled components do not get auto-focused on submit

Describe the bug When using uncontrolled components, handleSubmit focuses the first invalid field in the form. Example screenshot:

However, for controlled components using <Controller> the fields do not get focused. Example screenshot:

To Reproduce Steps to reproduce the behavior:

1. Use a controlled component with <Controller>
2. Trigger handleSubmit

Codesandbox link https://codesandbox.io/s/beautiful-worker-22hi3

Expected behavior Controlled components receive focus in the same way uncontrolled components do.

Desktop (please complete the following information):

• OS: macOS 10.15.3
• Browser Chrome
• Version 80.0.3987.116 (Official Build) (64-bit)

[bluebill1049]

Ah, so this just is not supported at all with the Controller or “controlled” components at the moment?

That’s not precise as well, because you can do it yourself at useEffect as long as you get to hold of the errors and ref (controlled input).

useEffect(() => {
  if (errors.text) {
    this.input.ref.focus();
  }
}, [errors])

anyway, let’s looking forward for the next update.

[xiaoyu-tamu]

Read the doc