[TextField] input label overlaps with input content if value is set asynchronously with react-hook-form

[falk-stefan]

Steps to reproduce

I have created a component for updating fields on entities. Anyways, in most cases the value needs to be fetched which means most of the time the initial value is undefined or an empty string.

It appears that updating the value like this won't be detected by the TextField somehow and, therefore, will render like this:

I am using react-hook-form here, not sure if that's the issue:

const { register, handleSubmit, reset, formState, watch, setValue } = useForm({
  mode: 'all',
  defaultValues: {
    [label]: value ?? ' ',
  },
});

The component watches changes and applies them:

useEffect(() => {
  setValue(label, value as string);
}, [label, setValue, value]);

which should take care of the value of TextField:

<form className="w-full" onSubmit={handleSubmit(onFormValid, onFormInvalid)}>
  <Box className="flex flex-grow flex-col md:flex-col relative">
    <TextField
      className="flex flex-grow"
      {...textFieldProps}
      label={label}
      placeholder={placeholder}
      {...register(label, { ...validation })}
    />
  </Box>
</form>

Current behavior

Setting a value with setValue of the react-hook-form causes the label to be rendered on top of the text-input which makes it overlap with any async-loaded value.

Expected behavior

Updating the TextField value should render the label correctly.

Search keywords: TextField react-hook-form async value update

[ZeeshanTamboli]

@falk-stefan Could this be related to react-hook-form/react-hook-form#2192? You might need to use the Controller component from react-hook-form. Also, this: https://stackoverflow.com/questions/50955603/react-material-ui-label-overlaps-with-text might help.

If none of the suggestions or comments from the linked issue work, could you share a minimal reproduction on StackBlitz or CodeSandbox so we can take a closer look? Thanks!