Fieldstate Error Not getting removed on change of required rule

[Ekta34]

I am using typescript in project. Initially required rule is present for Controller, but when removed the last error in { render -> fieldState } is not getting removed due to which not able to submit form.

[Moshyfawn]

You'll have to provide a minimal reproduction codesanbox in order for us to help you debug the issue.

[Ekta34]

https://codesandbox.io/s/vigorous-pond-mw7n6o?file=/src/App.tsx
this is minimal code for my project how i use library.
Here we enter value for first name which change require prop for last name. But when we save, it will still give error for last name field.

Same problem with my project.

[Moshyfawn]

To subscribe to the value change, you want to use the watch form method

- const isRequired = !getValues("isRequired")
+ const isRequired = !watch("isRequired")

[Ekta34]

I checked with this just now, but it didn't work.
You can check code link, it's updated.

Thanks for answering so fast! Really appreciated !

[Moshyfawn]

Alright, so I haven't found the issue yet, but I've created this codesanbox to check if it's the RHF issue. Doesn't look like it.

If you enter the first name, both the uncontrolled "lastName" and the controlled "middleName" fields are not required. So, the issue is somewhere in your FormFieldWrapper component

[Moshyfawn]

BTW, you can set mode: "onBlur" on the useForm hook instead of doing

onBlur={() => trigger()}

to fire the validation on each input's blur event.

[Ekta34]

But FormFieldWrapper component getting required as false. you can log and check. it is setting rules to empty object as well. now field state --> error is not getting updated. when rules are empty yet error is coming for last name is an issue.

In my opinion there is some re-rendering problem of render prop in Controller component.

[Moshyfawn]

It's not the RHF's problem, but rather the React's, from what I see. I might be wrong, tho.

Consider this example: you mutate the variable inside the component which doesn't get registered by React as a new prop value.

[sahand-sn]

having the same problem