React 表单挂钩 setValue 覆盖占位符值

Question

I have an edit user form. When I get data from API, I am able to setValue of the form field Array. But when I setValue of a formField ie first name or last name, it overwrites the placeholder value. But in the case useFieldArray it works fine. Please find the form updating code as below -

const handleGetUser = (user: UsersDataSourceModel) => {
    if (!_.isEmpty(user)) {
        setValue('firstName', user.firstName, {shouldTouch: true});
        setValue('lastName', user.lastName, {shouldTouch: true});
        setValue('emailId', user.emailId, {shouldTouch: true});
        if (user.roles.length) {
            user.roles.map((role, index) => {
                setValue(`userCountryRoleMappings.${index}.region`, role.region);
                setValue(`userCountryRoleMappings.${index}.roleId`, role.roleId);
                setValue(`userCountryRoleMappings.${index}.countryId`, role.countryId);
                setValue(`userCountryRoleMappings.${index}.neverExpireRole`, role.neverExpireRole);
                setValue(`userCountryRoleMappings.${index}.roleExpiryDate`, role.roleExpiryDate);
                setValue(`userCountryRoleMappings.${index}.isReadOnly`, role.isReadOnly);
            })
        }
    }
}

Pleae refer the image attached. It is how looking when edit form page is visited.

Any help is appreciated! Thanks a ton!

Answer 1

Thanks for the one more clue.

I found a similar issue that was reported on react-hook-form about setValue and placeholder view simultaneously.

https://github.com/react-hook-form/react-hook-form/issues/1556

From the link above, check out @devrnt 's comment. You mat find it helpful.
I copied his comment below just for the sake of your time.

---

@devrnt 's comment

Sandbox 1 Seems like a related issue: mui/material-ui#718 I would suggest to watch on the 'TextFieldTwo' value and manually set the shrink option. https://codesandbox.io/s/flamboyant-mountain-9532t

Sandbox 2 Can be fixed by setting the mode in useForm to onChange. Do mind that this often comes with a significant impact on performances. https://codesandbox.io/s/setremoteinputcontroller-wwsdt

Answer 2

So when you use material, yup and react-hook-form there are some problems. While looking at material ui and its component, I came across this below prop -

InputLabelProps={{ shrink: true }} 

So if you have any textField, you should use it like -

<TextField 
   InputLabelProps={{ shrink: true }} 
   size="small" 
   fullWidth 
   {...register('lastName')} 
   required
   label="Last Name" 
   variant="outlined" 
/>