Formik: [v2] useField onChange not working with custom values in 2.0.1-rc.0

[callmeberzerker]

🐛 Bug report

Current Behavior

const [field, meta] = useField('somename')

The if I try to wrap a TextInput with a custom onChange={event => field.onChange(event.target.value) } the field value isn't getting updated.

Expected behavior

The values get updated.

Reproducible example

https://codesandbox.io/embed/formik-codesandbox-template-t9d2p

You will see that the values are not changing as you are typing into the input

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 2.0.1-rc.0
| React | 16.8.0
| TypeScript | X
| Browser | any
| npm/Yarn | any
| Operating System | any

[jaripekkala]

https://github.com/jaredpalmer/formik/blob/v2.0.1-rc.0/docs/api/useField.md

It should be onChange={event => field.onChange(event) }

---

There are multiple errors in your demo. input element must have an name or id attribute when working with formik. Also the TextField props were not correctly spread.

See below working code snippet

const TextField = props => {
  const [field] = useField(props.name);

  return (
    <input {...field} onChange={e => {
      // Do anything custom logic here if needed.
      // Otherwise this can be removed
      field.onChange(e);
    }} />
  );
};

[callmeberzerker]

Hi @jaripekkala

I know it's working with native change event. That's why in the title I have with custom values. And I don't think you need anything else (id or name) when using the hooks version. That's the whole point, they (hooks) are making custom form elements a bit easier to integrate.

Also if you add name, id to the input you will still see that the values will not get updated, and according to the TypeScript api in v2 field.onChange should work with either SyntheticEvent or string.

So yea, this is a bug....

[jaripekkala]

You don't need to manually add the name or id attributes if you spread the field props returned from the useField like in the code snippet. You were missing both options in your demo.

Consider following examples

const TextField = props => {
  const [field] = useField(props.name);

  return (
    <input {...field} onChange={e => {
      e.target.value = 'custom value';
      field.onChange(e);
    }} />
  );
};

const TextField = props => {
  const [field] = useField(props.name);

  return (
    <input onChange={e => {
      const event = {
        target: {
          name: props.name,
          value: 'custom value',
        },
      };

      field.onChange(event);
    }} />
  );
};

The latter will not trigger onBlur and onFocus events as they are not given to the input element. However the onChange will fire both cases and change the value to a custom value.

---

Edit: you indeed are correct that the handleChange has typings for string parameter. I didn't know such option was available and would be a lot better option than firing custom events.

---

Edit2: apparently you can do this

https://github.com/jaredpalmer/formik/blob/v2.0.1-rc.0/src/Formik.tsx#L510

const TextField = props => {
  const [field] = useField(props.name);

  return (
    <input {...field} onChange={e => {
      field.onChange(props.name)(e.target.value.toUpperCase());
    }} />
  );
};

[callmeberzerker]

You are right, that's what the string param is for! Which is weird since useField hook should already have bound a onChange for the target name. Anyhow, that works... I will close this issue.

[Andreyco]

You can do that in v1 as well. Read the types ;)