React Hook Form value not set for one of the fields

Question

I am using React-Hook-Form to render multiple fields (via child components) I also have defaultValues defined for all the fields

My Form is as below;

<Form 
    defaultValues={props.defaultValues}
    validationSchema={mySchema}
    ref={formRef}
>

I instantiate the individual fields as below;

<Field key={firstNameFieldOutside.id} field={firstNameFieldOutside} />

My field config passed to the generic Field component is as below;

{
    "id": "first-name-field-outside",
    "mandatory": true,
    "visible": true,
    "maxLength": 20,
    "items": {},
    "value": "FName Outside",
    "disabled": false,
    "hidden": false,
    "fieldLabel": "Test Field Outside",
    "regex": "^[a-zA-Z0-9]+[a-zA-Z0-9\\s]{0,50}$|^$",
    "editable": true
}

In my generic Field component, I have

return (
        <>
            <Input 
                label={labelText} 
                name={field.id}
                inputProps={{
                    maxLength: field.maxLength
                }}
                disabled={field.disabled}
                required={field.mandatory}
                autoComplete="off"
            />
        </>
);

Now, I can see all the input fields rendered in the DOM.

But for some reason, for one of the fields firstNameFieldOutside, I cannot see "value" being set. Other attributes like maxlength are applied for this field.

Other difference I observed while debugging for this field specifically while using React Dev Tools (Components tab), when I select InputBase, I see Ref as false (under hooks)

The Ref is true for all the other fields.

Please help me why I am not seeing "value" set only for this field.

Adding one more point while debugging if this can point out the issue... So, when I debug inside react-hook-form inside function watch()

I find this particular field "first-name-field-outside" missing from defaultValuesRef.current

and I get undefined from this field's watch(field.id) For other field's, watch(field.id) gives me the string value

React Hook Form value not set for one of the fields

0 Answers0