[v2] Any way to use a custom Formik Field?

We wrap the Formik Field with our own to provide additional functionality:

1. We have a <FieldSet/> component that we use with nested fields so you can do:

<FieldSet name='a.b.c.d'>
  <Field name='z' />
</FieldSet>

1. We have format and normalize props for our custom <Field/> that converts data from/to API calls like <Field format={timeToDate} normalize={dateToTime} .../>

Any idea on if we can still pull this off with Formik-material-ui v2 since you no longer support using <Field>?

Here is what our custom Field looks like:

import { FastField as FormikField, isInputEvent } from 'formik';
import * as PropTypes from 'prop-types';
import React from 'react';
import { FieldSetConsumer, formatFieldName } from './FieldSet';

const Field = ({ component: Component, name, format, normalize, useContext, onChange, validate, ...otherProps }) => (
  <FieldSetConsumer>
    {context => {
      const fieldName = formatFieldName(useContext ? context : '', name);
      return (
        <FormikField name={fieldName} normalize={normalize} validate={validate}>
          {({ field, form }) => {
            const { value } = field;

            const handleChange = eventOrValue => {
              const event = isInputEvent(eventOrValue);
              let newValue;
              if (event) {
                newValue =
                  eventOrValue.target.type === 'checkbox' ? eventOrValue.target.checked : eventOrValue.target.value;
              } else {
                newValue = eventOrValue;
              }
              newValue = normalize ? normalize(newValue) : newValue;
              const oldValue = value;

              field.onChange(eventOrValue);
              form.setFieldValue(fieldName, newValue);
              if (onChange) {
                onChange({ event: eventOrValue, field, form, newValue, oldValue });
              }
            };

            const { children, ...props } = otherProps;
            return (
              <Component
                field={{
                  ...field,
                  onChange: handleChange,
                  value: format ? format(value) : value
                }}
                form={form}
                {...props}
              >
                {typeof children === 'function' ? children({ field, form }) : children}
              </Component>
            );
          }}
        </FormikField>
      );
    }}
  </FieldSetConsumer>
);

[mycroes]

Can’t you just replace Field with TextField (import {TextField} from 'formik-material-ui';)? From what I saw in the docs that’s how it’s supposed to work now…

[cliedeman]

@MikeSuiter that is an oversight. It should be possible to override onChange.