diff --git a/docs/pages/guides/Formik.example.jsx b/docs/pages/guides/Formik.example.jsx index 1012b142f..6884b1571 100644 --- a/docs/pages/guides/Formik.example.jsx +++ b/docs/pages/guides/Formik.example.jsx @@ -6,6 +6,7 @@ import { KeyboardDatePicker } from '@material-ui/pickers'; const DatePickerField = ({ field, form, ...other }) => { const currentError = form.errors[field.name]; + return ( { format="dd/MM/yyyy" helperText={currentError} error={Boolean(currentError)} - onError={(_, error) => form.setFieldError(field.name, error)} - onChange={date => date && form.setFieldValue(field.name, date, true)} + onError={error => { + // handle as a side effect + if (error !== currentError) { + form.setFieldError(field.name, error); + } + }} + // if you are using custom validation schema you probably want to pass `true` as third argument + onChange={date => form.setFieldValue(field.name, date, false)} {...other} /> ); diff --git a/docs/prop-types.json b/docs/prop-types.json index d53959d49..d0ff46f78 100644 --- a/docs/prop-types.json +++ b/docs/prop-types.json @@ -288,7 +288,7 @@ }, "onError": { "defaultValue": null, - "description": "Callback fired when new error should be displayed", + "description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)", "name": "onError", "parent": { "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", @@ -812,7 +812,7 @@ }, "onError": { "defaultValue": null, - "description": "Callback fired when new error should be displayed", + "description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)", "name": "onError", "parent": { "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", @@ -1556,7 +1556,7 @@ }, "onError": { "defaultValue": null, - "description": "Callback fired when new error should be displayed", + "description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)", "name": "onError", "parent": { "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", @@ -1888,7 +1888,7 @@ }, "onError": { "defaultValue": null, - "description": "Callback fired when new error should be displayed", + "description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)", "name": "onError", "parent": { "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", @@ -2440,7 +2440,7 @@ }, "onError": { "defaultValue": null, - "description": "Callback fired when new error should be displayed", + "description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)", "name": "onError", "parent": { "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", @@ -3033,7 +3033,7 @@ }, "onError": { "defaultValue": null, - "description": "Callback fired when new error should be displayed", + "description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)", "name": "onError", "parent": { "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx", diff --git a/lib/src/Picker/makePickerWithState.tsx b/lib/src/Picker/makePickerWithState.tsx index b3f504763..4a5206315 100644 --- a/lib/src/Picker/makePickerWithState.tsx +++ b/lib/src/Picker/makePickerWithState.tsx @@ -4,8 +4,8 @@ import { Picker, ToolbarComponentProps } from './Picker'; import { ExtendWrapper, Wrapper } from '../wrappers/Wrapper'; import { PureDateInputProps } from '../_shared/PureDateInput'; import { DateValidationProps } from '../_helpers/text-field-helper'; +import { KeyboardDateInputProps } from '../_shared/KeyboardDateInput'; import { StateHookOptions, usePickerState } from '../_shared/hooks/usePickerState'; -import { KeyboardDateInput, KeyboardDateInputProps } from '../_shared/KeyboardDateInput'; import { BaseKeyboardPickerProps, useKeyboardPickerState, @@ -20,7 +20,7 @@ export type WithPureInputProps = DateValidationProps & ExtendWrapper; export interface MakePickerOptions { - Input: KeyboardDateInput | PureDateInputProps; + Input: any; useState: typeof usePickerState | typeof useKeyboardPickerState; useOptions: (props: any) => StateHookOptions; getCustomProps?: (props: T) => Partial; diff --git a/lib/src/_shared/KeyboardDateInput.tsx b/lib/src/_shared/KeyboardDateInput.tsx index 9e4f5667a..1f696c37a 100644 --- a/lib/src/_shared/KeyboardDateInput.tsx +++ b/lib/src/_shared/KeyboardDateInput.tsx @@ -11,7 +11,7 @@ export interface KeyboardDateInputProps extends ExtendMui { format: string; onChange: (value: string | null) => void; - openPicker?: () => void; + openPicker: () => void; validationError?: React.ReactNode; inputValue: string; inputProps?: TextFieldProps['inputProps']; diff --git a/lib/src/typings/BasePicker.tsx b/lib/src/typings/BasePicker.tsx index c31be6eac..111a981ea 100644 --- a/lib/src/typings/BasePicker.tsx +++ b/lib/src/typings/BasePicker.tsx @@ -33,7 +33,9 @@ export interface BasePickerProps { emptyLabel?: string; /** Callback fired when date is accepted @DateIOType */ onAccept?: (date: MaterialUiPickersDate) => void; - /** Callback fired when new error should be displayed @DateIOType */ + /** Callback fired when new error should be displayed + * (!! This is a side effect. Be careful if you want to rerender the component) @DateIOType + */ onError?: (error: React.ReactNode, value: MaterialUiPickersDate | ParsableDate) => void; /** On open callback */ onOpen?: () => void;