Formik: Field custom component - Passing down `form` prop breaks Submit on Enter

[aaronmcadam]

🐛 Bug report

Current Behavior

Not removing form off props breaks Submit on Enter behaviour

Expected behavior

I'd like to not have to remove form off props if possible

Reproducible example

https://codesandbox.io/s/ly158nyw8m

Suggested solution(s)

Maybe raise a warning when passing incompatible props?

Additional context

I'm using my own custom component where I don't care about the form prop.

const TextInputField = (props: any) => {
  // Passing down the `form` prop to the input breaks Submit on Enter
  const { field, form, ...otherProps } = props;

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

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 1.3.1
| React | 16.6.3
| TypeScript | 3.1.6
| Browser | Chrome 70
| npm/Yarn | yarn
| Operating System | MacOS 10.14.1

[jaredpalmer]

Yeah this is a wart that was initially designed for compatibility with redux-form, but has festered. It will be mitigated in v2 with the new useField Hook:

const TextInputField = (props: any) => {
  const form = useFormikContext() // exact naming is still WIP on this one.
  const [field, meta] = useField(props.name); // field is the same, meta contains field-level slices of state
  return 
     <>
       <TextInput {...field} {...props} />
       {meta.touch && meta.error && <div>{meta.error}</div>}}
     </>
};

[jaredpalmer]

As for your specific problem, you have to destructure { form } at the moment. If this really bothers you, you can write your own <Fieldset> (it's only around 60 lines of code) with connect().

[jaredpalmer]

I am going to close this because it is a duplicate of #167

[aaronmcadam]

Ah that new API will be lovely, thanks 😀