console.log(watch()) breaks controlled form

[jvgeee]

Describe the bug
When trying to use a controlled form component with useState, if using console.log(watch()) anywhere the form breaks. Omitting the console log makes things work as expected.

To Reproduce

See the sandbox, while console.log(watch()) is there you cannot type in the input, and if you try console logging within the onChange function it will never be called

Codesandbox link (Required)
https://codesandbox.io/s/modern-wood-kzi6c?file=/src/index.js

• useForm Template
• useFieldArray Template
• Controller Template

[bluebill1049]

you are mixing controlled input with uncontrolled.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import "./styles.css";

const App = () => {
  const { register, watch } = useForm();

  // Comment out this line to fix form
  console.log(watch());

  return (
    <div>
      <label>First Name</label>
      <input
        name="firstName"
        type="text"
        ref={register}
        pattern="[A-Za-z]+"
      />
    </div>
  );
};

[jvgeee]

Maybe I'm not understanding the concepts correctly. In actual use, it's part of a bigger form which has some elements controlled (I want to limit the input so that only letters can appear, afaik the only way to do this is using state + onChange) and others that are uncontrolled.

I reduced the form to only have one field so I could display the issue better, but maybe it's not useful.

See below; what am I missing here?

const App = () => {
  const { register, watch, handleSubmit, setError, errors } = useForm();
  const [fName, setFName] = React.useState("");

  // Comment out this line to fix form
  console.log(watch());

  const onChangeFName = (event) => {
    console.log("In onChange function");
    if (event.target.validity.valid) {
      setFName(event.target.value);
    }
  };

  return (
    <form>
    <div>
      <label>First Name</label>
      <input
        name="firstName"
        type="text"
        ref={register}
        onChange={onChangeFName}
        value={fName}
        pattern="[A-Za-z]+"
      />
    </div>
    <div>
      <label>Email</label>
      <input
        name="email"
        type="text"
        ref={register}
      />
    </div>
    <div>
      <label>password</label>
      <input
        name="password"
        type="password"
        ref={register}
      />
      </div>
    </form>
  );
};

[bluebill1049]

why do you need setName?

[jvgeee]

Because my client wants the UI to only allow the user to type in valid inputs, so I'm using onChange to validate the content before it's allowed to update.

(the use-case might sound dumb, but it'll be used in many places, like a custom date of birth field that just accepts numbers)

[jvgeee]

I tried register({pattern: xxx}), but doesn't this validation only work once the form is submitted?

[bluebill1049]

if you want to prevent the user's input.

<input onChnge={() => e.target.value = 'xxx'} ref={register} name="mask" />

or event better considers using a mask input component.

[jvgeee]

Ah, gotcha. For anyone else who comes across this, here's a sandbox with react-hook-from working witih react-input-mask: https://codesandbox.io/s/react-hook-form-with-inputmask-d4fvd?file=/src/App.js:1009-1168

[bluebill1049]

thanks for sharing 👍