Field's Formik bag empty when nested in third party component

Question

I'm using Formik's Field component to render an input like this:

<Formik 
  initialValues={initialValues}
  onSubmit={onSubmit}
  render={formProps => (
    <Form>
      <Field name="lastName" render={({ field, form }) => (
        <input {...field} placeholder="lastName" />
      )} />
    </Form>
)} />

Here is a CodeSandbox that illustrates the issue. You'll see if you swap the product column definition with the one that just renders the product as a string rather than use a Formik input, it works fine.

In the code above, Formik seems to be "automagically" determining the Formik bag form object in the Field's render function.

This has worked without issue until I integrated my Field into a third party library, in my case, rendering it in a cell of an agGrid table. When I do this, I get TypeError: this.props.formik.registerField is not a function browser console errors. Debugging this error, I see the following in Formik's compiled code:

FieldInner.prototype.componentDidMount = function () {
  this.props.formik.registerField(this.props.name, this);
};

When I inspect this.props.formik which should be my Formik bag, it's an empty object. This is the same object I see when I put my break point in the Field's render function. When I inspect this object for instances of my Field outside of agGrid, it is the fully populated Formik bag including initialValue props, registerField function, etc.

Why is Formik not properly retrieving the Formik bag form object when my Field is nested in an agGrid table cell and how can I address this issue?

Answer 1

Are you using a version of React >=16? If so it looks like AgGridReact doesn't support the new version of the context API that Formik is using behind the scenes.

https://github.com/ag-grid/ag-grid-react/issues/131

Either wait for AgGridReact to release a new version, or consider downgrading to a version of React <16 so Formik falls back to the old context api.