An error notification persists despite the field being filled with a value.

[6vvvvvv]

Hi all,

I require assistance and would appreciate some suggestions on this matter.

Essentially, I would like to receive a notification when a required field is left empty upon form submission. However, the form continues to indicate an issue on field Logo even when I have filled in the required value.

Before upload:

After upload and submit

Console log

Here is the code for the field.

Thanks for your help!

[Moshyfawn]

I don't see why the validation should fail in the screenshot you provided. The only odd thing I notice is key={inputKey} on the file input, which might have something to do with the component being rendered vs. what RHF sees as filled input. Try removing the key prop and see if that helps.

[6vvvvvv]

It's interesting that I no longer encounter errors with when using an input with a controller. I might consider altering my approach to achieve this. Nevertheless, I appreciate your suggestion.

RHF team is consistently responsive whenever I seek assistance. Thank you.

[Moshyfawn]

What mode and reValidateMode do you use on your form?

[6vvvvvv]

I only use criteriaMode: "firstError" / shouldFocusError: true as option.

[Moshyfawn]

I overlooked another aspect of how your file input is connected to RHF. You are spreading the return values of the register method and subsequently replacing the onChange input callback with your custom handleFileInputChange. This might be the reason for th behavior you're seeing. To prevent overriding the onChange callback from the returned register values, use the onChange callback prop in the second options argument of the register method.

{...register("fieldName", { onChange: handleFileInputChange })}

[6vvvvvv]

It's fine, thanks.