issue: Focus is not working after reset

[atillaaliyev]

Version Number

7.41.3

Codesandbox/Expo snack

https://codesandbox.io/s/rhf-after-reset-focus-problem-0jjb2w

Steps to reproduce

1.Press submit while input is empty and see focus and error.
2.You enter input and delete input, apply step 1 and see focus and error.
3.Press reset button then press submit, the focus is not working.

Expected behaviour

Hi,
I'm using material-ui + RHF+ react-imask at same time for coding custom library.
I'm passing RHF field ref to TextField for focusing and it's working good.
After then i'm passing to input component third-party react-imask component (it's getting ref), not problem, the focusing is working perfect.
But when i used the reset function, i lost the focus behavior.

screen-recorder-sun-jan-01-2023-14-40-07.webm

What browsers are you seeing the problem on?

Firefox, Chrome, Edge

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[atillaaliyev]

#9205

I got it, if problem is same? But i need to clear all values and state.

[bluebill1049]

we can consider to introduce a prop to keep all input references, which means you will have to guarantee that none of the field's inputs will get mutated/removed after resetting. For now, the focus will be ready after the next render cycle which means all inputs get re-registered again.

[benshabatnoam]

we can consider to introduce a prop to keep all input references

We would be very happy with this new keep prop as we're having issue with this specific case in our system.
Thanks!

[AayushKarki714]

prop to keep all input references

Is there any update to this @bluebill1049?

[atillaaliyev]

I understood but re-register is difficult this case, maybe I can change key prop for form element each reset but I don't know is it logical :)
I don't know logic for reset but I have a problem for resetField.
I'm using resetField and if input is empty, there is no problem. But if input is full, when I used resetField , the border is red still. I have to call resetField two times.

What's the wrong?

screen-recorder-sun-jan-01-2023-20-27-18.webm

[bluebill1049]

I don't know logic for reset but I have a problem for resetField.

can you share a codesandbox with steps to reproduce?

[atillaaliyev]

Actually I updated this codesandbox : https://codesandbox.io/s/rhf-after-reset-focus-problem-0jjb2w

1.Press submit and get error.
2.After then, fill input.
3.Press reset button(resetField working on background) then the border will be error, I expect default.
4.Press reset button again, you will see default border.

[leapful]

@atillaaliyev

The reserField method always perform re-evaluation on field state for isValid flag.

Reference: https://react-hook-form.com/api/useform/resetfield

Could it be possible to use reset method instead ? For example: https://codesandbox.io/s/rhf-after-reset-focus-problem-forked-t21kku?file=/src/App.tsx

[engrjeff]

The workaround that works for me involves using a ref for the form then using selecting the first input inside it using querySelector then calling focus

const formRef = useRef<HTMLFormElement | null>(null)

formRef.current?.querySelector("input")?.focus()

In my case the first input is a of type=text.

[AnouarMc]

using setTimeout with a 1ms delay to focus the input worked for me.

form.reset();
setTimeout(() => form.setFocus("email"), 1);

[maiconsanson]

IMO, the most reliable approach here is to use requestAnimationFrame, as it ensures the next browser render has completed before attempting to focus the input again. This helps because reset() clears the form state, and the input might not be registered yet when calling setFocus() immediately after.

const handleResetAndFocus = () => {
  reset()
  requestAnimationFrame(() => setFocus('fieldName'))
}

requestAnimationFrame guarantees that the focus happens after the DOM and component tree have updated.

@bluebill1049, What do you think about including this solution in the docs? I think it could help others facing the same situation, as it's a common approach in UX to set a focus after reset.