[v2] useField: bound name to onChange and onBlur

[neiker]

🚀 Feature request

Current Behavior

I'm using useField on react-native and since TextInput has no name attribute, I need to bind name to handlers manually:

const TextField: React.SFC<TextFieldProps> = ({ name, ...props }) => {
  const [field] = useField(name);

  return (
    <TextInput
      {...props}
      value={field.value}
      onChangeText={field.onChange(name)}
      onBlur={field.onBlur(name)}
    />
  );
};

Desired Behavior

I spect to use onChange and onBlur handlers like this:

const TextField: React.SFC<TextFieldProps> = ({ name, ...props }) => {
  const [field] = useField(name);

  return (
    <TextInput
      {...props}
      value={field.value}
      onChangeText={field.onChange}
      onBlur={field.onBlur}
    />
  );
};

Suggested Solution

Bind name in formik.getFieldProps.
I think here:

formik/src/Formik.tsx

Lines 765 to 770 in 377c36e

	const field: FieldInputProps<any> = {
	name,
	value: valueState,
	onChange: handleChange,
	onBlur: handleBlur,
	};

It should be replaced with:

      const field: FieldInputProps<any> = {
        name,
        value: valueState,
        onChange: handleChange(name),
        onBlur: handleBlur(name),
};

Can this break useField for web users?

Possible workarounds

Create a useFieldNative:

import * as React from 'react';

import { useField, FieldMetaProps } from 'formik';

interface FieldInputNativeProps {
  value: string;
  onChangeText: (text: string) => void;
  onBlur: () => void;
}

export default function useFieldNative(
  name: string,
): [FieldInputNativeProps, FieldMetaProps<any>] {
  const [field, meta] = useField(name);
  const onChangeText = React.useCallback(field.onChange(name), [
    name,
    field.onChange,
  ]);
  const onBlur = React.useCallback(() => field.onBlur(name), [field, name]);

  const fieldNative: FieldInputNativeProps = {
    value: field.value,
    onChangeText,
    onBlur,
  };

  return [fieldNative, meta];
}


const TextField: React.SFC<TextFieldProps> = ({ name, ...props }) => {
  const [field] = useFieldNative(name);

  return <TextInput {...props} {...field} />;
};

Who does this impact? Who is this for?

react-native users

[sibelius]

this would be better for web as well

[kyle-johnson]

At the least, need to update the react-native docs (I may find time for a PR later in the week).

This was a real head scratcher, since name is already being passed to useField.

[zingerj]

Seems like this wouldn't break any existing functionality, but would be super helpful for React Native users (like me!). At the very least a slightly modified useNativeField as proposed here would be much appreciated!

[jaredpalmer]

I agree. Feel free to submit a PR.

[zingerj]

Would you prefer extending existing functionality of useField to work for this, or adding a new dedicated hook, like useNativeField?

[jaredpalmer]

My guess is that this is actually breaking because people have messed with useField’s field.onChange although that was not my intention

[zingerj]

Hmm okay, sounds like useNativeField would be safer then, but would that overlap too much with the upcoming useTextInput, assuming that all formik-native hooks would have this behavior built-in?

[jaredpalmer]

Add it to formik native

[zingerj]

Happy to submit a PR, but just want to make sure I'm doing it right. Wouldn't this change be similar to (or the same as) cb71c04? Or are you recommending to do basically the same thing, but extract to formik-native?

[jaredpalmer]

Yes, but forgot I did that. Isn’t this fixed then?

[zingerj]

Seemed like it was out of date so I implemented the same thing in #2176, will also update the docs and tests accordingly.