Unexpected Pattern Validation works when using Controller

[ghost]

Hi, there. I have a problem. Usually, when you didn't input anything, even if non-required fields have pattern validation, they are valid. But, when you use Controller, it's not.

I don't want to pattern-validate when the fields are not required. Because the fields are non-required.

Does anyone know how to solve this?

Thank you.

https://codesandbox.io/s/my-react-hook-form-test-76j28

import React from "react";
import { useForm, Controller, ErrorMessage } from "react-hook-form";
import "./styles.css";

const MyInput = props => (
  <div>
    <input type="text" {...props} />
  </div>
);

export default function App() {
  const { handleSubmit, register, control, errors } = useForm({
    mode: "onBlur"
  });

  return (
    <form className="App" onSubmit={handleSubmit(data => console.log(data))}>
      <p>I don't want to pattern-validate when it's empty.</p>
      <Controller
        name="firstName"
        placeholder="first name"
        as={MyInput}
        rules={{
          pattern: {
            value: /^john$/,
            message: "firstName is invalid"
          }
        }}
        control={control}
      />
      <ErrorMessage
        style={{ color: "red" }}
        errors={errors}
        name="firstName"
        as="p"
      />
      <p>It works as expected.</p>
      <div>
        <input
          name="lastName"
          placeholder="last name"
          ref={register({
            pattern: {
              value: /^smith$/,
              message: "lastName is invalid"
            }
          })}
        />
      </div>
      <ErrorMessage
        style={{ color: "red" }}
        errors={errors}
        name="lastName"
        as="p"
      />
      <button type="submit">submit</button>
    </form>
  );
}

[bluebill1049]

you are missing defautltValue at Controller

<Controller
        name="firstName"
        placeholder="first name"
        defaultValue=""
        as={MyInput}
        rules={{
          pattern: {
            value: /^john$/,
            message: "firstName is invalid"
          }
        }}
        control={control}
      />

the behavior is expected and consistent.

[bluebill1049]

if you want to skip empty string, you can always use validate function.

[ghost]

@bluebill1049 Wow, defaultValue="" works for me. I didn't notice that. Thank you for answering, Bill.