Textfield label is not shrinking when we update the value with empty string using setValue

[ViCkY-29]

Issue
When we try to clear the value for a textfield then we are using setValue and providing empty string to the input .
There we are facing one issue like the TextField label is not shrinking.

Here I am providing the link for your reference.

CodeSandBox Reference
Link - https://codesandbox.io/s/react-hook-form-mui-textfield-forked-8ch3gz?file=/src/index.js

Here if you see I am trying to clear and disable the textfield whenever the checkbox is enabled.

The same thing I tried using normal react useState and useEffect , there It is working fine .
Link - https://codesandbox.io/s/material-demo-forked-f4ngwt?file=/demo.js

It seems like there is some issue with the react hook form.

Please provide your valuable input to resolve this issue.

[leapful]

@ViCkY-29

You codesandbox url is using react-hook-form version 3.21.18 which is very old and not supported any more. Please try to upgrade react-hook-form to make sure it's compatible with new form handling.

[ViCkY-29]

Hi @leapful

Thank you for your response .
We are using react hook form version ^7.43.9 in our application and there also we are facing the same issue. It seems like that issue is still present.

You can reproduce this issue in your local system.

code

import ReactDOM from "react-dom";
import useForm from "react-hook-form";
import { Checkbox } from "@material-ui/core";

import { TextField } from "@material-ui/core";

function App() {
  const { register, setValue } = useForm({
    defaultValues: {
      inputField: ""
    }
  });

  const [disable, setDisabled] = React.useState(true);

  useEffect(() => {
    if (disable) {
      setValue("inputField", "");
    }
  }, [disable]);

  return (
    <div className="App">
      <TextField
        style={{
          width: "200px"
        }}
        name="inputField"
        inputRef={register}
        label="Label Text"
        disabled={disable}
        inputProps={{
          "aria-label": "Description"
        }}
      />
      <Checkbox
        checked={disable}
        onChange={() => {
          setDisabled(!disable);
        }}
        inputProps={{ "aria-label": "primary checkbox" }}
      />
    </div>
  );
}

Use Case - whenever you you enabled the checkbox we are trying to clear the value and disable the field.

Please let me know if there is any other way to fix this issue.

[leapful]

@ViCkY-29

The root cause is from MUI TextField component because its parent wrapper FormControl component will handle filled or empty value state (the one that shows label animation on UI) by using onChange callback or watch on change of value on TextField component. While setValue from react-hook-form cannot mutate inner locale state of the component, you need to trigger it manually.

Luckily, MUI is using FormControlProvider to manage filled or empty value state via function onFilled or onEmpty, you can access those methods via useFormControl() hook to trigger change UI state manually.

Workaround: https://codesandbox.io/s/react-hook-form-mui-textfield-forked-dhdlh8?file=/src/index.js

[ViCkY-29]

Hey @leapful

Thanks a lot.
I have implemented the way as you mentioned and It's working completely fine : )