V7 convert null/undefined to empty string when form is submitted?

[michael-land]

I'm trying to migrate to v7 and experiencing some issues.

Looks like v7 will coalesce null and undefined to empty string when form is submitted?

To reproduce, just click submit without input anything. Toggle version between v6 and v7 and see the output in the console.

https://codesandbox.io/s/youthful-gould-ocd4n?file=/src/App.tsx

//v6 output
{FirstName: null}

// v7 output
{FirstName: ""}

Is this expected behavior in V7?

---

updated, I also noticed this weird behavior in v7.

export default function App() {
  const { handleSubmit, control, getValues } = useForm({
    defaultValues: { FirstName: null }
  });

  // print null
  console.log(getValues());

  React.useEffect(() => {
   // print empty string
    console.log(getValues());
  }, []);
  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <Input control={control} name="FirstName" />
      <input type="submit" />
    </form>
  );
}

[bluebill1049]

You have to remove that ref, or else we will read e.target.value,

function Input(props: any) {
  const { field: {ref, ...rest} } = useController(props);
  return (
    <input
      {...rest}
      value={rest.value ?? undefined}
      placeholder={props.name}
    />
  );
}

or you have to hijack the onChange at useController.

[michael-land]

Thanks, remove ref seem works, but the input no longer get focus on error.

or you have to hijack the onChange at useController.

can u explain it a little more? did you mean hijack the onChange method returned by useController()?

I don't think it will work because the input not touched, and the onChange event never fired.

[bluebill1049]

const { field } = useController()

<input onChange={props.onChange(null)} value={field.value ? null : ''} /> without some conditional maybe? i haven't test it.

[michael-land]

I see what you mean.

The problem is html does not allow pass null as input value,

Warning: valueprop oninputshould not be null. Consider using an empty string to clear the component orundefined for uncontrolled components.

also we cannot pass undefined as input value

Warning: A component is changing an uncontrolled input to be controlled,

What i used to do in v6 is store null or undefiend as controller value, cast it to empty string when pass to <input value={field.value || ""} />

function Input({ defaultValue, ...other }: any) {
  const { field } = useController({
    ...other,
    defaultValue: defaultValue || null
  });
  return (
    <input
      {...field}
      onChange={(event) => field.onChange(event.target.value || null)}
      value={field.value || ""}
    />
  );
}

But if we use input#value as controller value when invoke getValues(), we never get null or undefined.

Avoid pass ref to input solve the problem, but how to get auto focus on error ?

[bluebill1049]

hmmm, i think you may have to turn that component into Controlled component then.