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);