Pickers make Formik consider the Form to be always invalid

[apollux]

Including the TimePicker, DatePicker or DateTimePicker in a form makes Formik consider the form as invalid. The errors property for the picker is set to an empty string and apparently that makes the form invalid.

Consider the following example:

import * as React from "react";
import { Formik, Form } from "formik";
import { TextField } from 'formik-material-ui'
import {
  TimePicker,
  DatePicker,
  DateTimePicker
} from "formik-material-ui-pickers";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";

export default function App() {
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Formik
        initialValues={{
          email: "",
          dateTime: new Date()
        }}
      >
        {({ errors, isValid }) => (
          <Form>
            <TextField name="field" label="Field" />
            <br />
            <TimePicker name="time" label="Time" />
            <br />
            <DatePicker name="date" label="Date" />
            <br />
            <DateTimePicker name="dateTime" label="Date Time" />
            <br />
            errors:
            <pre>{JSON.stringify(errors, null, 2)}</pre>
            isValid: {isValid ? "true" : "false"}
          </Form>
        )}
      </Formik>
    </MuiPickersUtilsProvider>
  );
}

this will show errors to be:

{
  "time": "",
  "date": "",
  "dateTime": ""
}

and the isValid field to be false. https://codesandbox.io/s/sad-moore-i4b4k

[Chmielik]

Same issue there

[Chmielik]

@apollux it looks like this version of @material-ui/pickers@3.2.5 (https://github.com/mui-org/material-ui-pickers/releases/tag/v3.2.5) is breaking the validation. Using 3.2.4 solves the problem.

[cliedeman]

There have been a number of releases. Is this still happening?

[andre-aktivconsultancy]

Yes I tested this with: @material-ui/pickers:3.2.10 @formik-material-ui-picker:0.0.4 @formik-material-ui:2.0.0-alpha.3 @formik:2.1.4

I forked your codesandbox with the 0.0.6 release of formik-material-ui-picker and reproduced it there as well: https://codesandbox.io/s/stupefied-germain-elclg

[cliedeman]

Fixed in 0.0.8 - https://codesandbox.io/s/stupefied-germain-elclg

[andre-aktivconsultancy]

Awesome! Thank you :)

[CharlestonREM]

time and date pickers default to current timestamp even if initialValues are set to empty strings

The initial values are set to empty strings, but somehow the fields supply the current time. The pickers are based on the codesandbox date picker and time picker.

[CharlestonREM]

time and date pickers default to current timestamp even if initialValues are set to empty strings

The initial values are set to empty strings, but somehow the fields supply the current time. The pickers are based on the codesandbox date picker and time picker.

This was not the problem. I needed to set the value of the date picker and time picker fields to null in the initial values.

https://github.com/stackworx/formik-material-ui/issues/147#issuecomment-785355948