diff --git a/packages/react-core/src/components/DatePicker/DatePicker.tsx b/packages/react-core/src/components/DatePicker/DatePicker.tsx index 3b8a915917e..abbd7a2502a 100644 --- a/packages/react-core/src/components/DatePicker/DatePicker.tsx +++ b/packages/react-core/src/components/DatePicker/DatePicker.tsx @@ -42,9 +42,9 @@ export interface DatePickerProps /** Error message to display when the text input cannot be parsed. */ invalidFormatText?: string; /** Callback called every time the text input loses focus. */ - onBlur?: (value: string, date?: Date) => void; + onBlur?: (event: any, value: string, date?: Date) => void; /** Callback called every time the text input value changes. */ - onChange?: (value: string, date?: Date) => void; + onChange?: (event: React.FormEvent, value: string, date?: Date) => void; /** String to display in the empty text input as a hint for the expected date format. */ placeholder?: string; /** Props to pass to the popover that contains the calendar month component. */ @@ -138,28 +138,28 @@ const DatePickerBase = ( setErrorText(validators.map(validator => validator(date)).join('\n') || ''); }; - const onTextInput = (value: string) => { + const onTextInput = (value: string, event: React.FormEvent) => { setValue(value); setErrorText(''); const newValueDate = dateParse(value); setValueDate(newValueDate); if (isValidDate(newValueDate)) { - onChange(value, new Date(newValueDate)); + onChange(event, value, new Date(newValueDate)); } else { - onChange(value); + onChange(event, value); } }; - const onInputBlur = () => { + const onInputBlur = (event: any) => { if (pristine) { return; } const newValueDate = dateParse(value); if (isValidDate(newValueDate)) { - onBlur(value, new Date(newValueDate)); + onBlur(event, value, new Date(newValueDate)); setError(newValueDate); } else { - onBlur(value); + onBlur(event, value); setErrorText(invalidFormatText); } }; @@ -170,7 +170,7 @@ const DatePickerBase = ( setValueDate(newValueDate); setError(newValueDate); setPopoverOpen(false); - onChange(newValue, new Date(newValueDate)); + onChange(null, newValue, new Date(newValueDate)); }; const onKeyPress = (ev: React.KeyboardEvent) => { diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerBasic.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerBasic.tsx index 000cf4c9807..65e371fcc7b 100644 --- a/packages/react-core/src/components/DatePicker/examples/DatePickerBasic.tsx +++ b/packages/react-core/src/components/DatePicker/examples/DatePickerBasic.tsx @@ -4,8 +4,8 @@ import { DatePicker } from '@patternfly/react-core'; export const DatePickerBasic: React.FunctionComponent = () => ( console.log('onBlur', str, date)} + onBlur={(_event, str, date) => console.log('onBlur', str, date)} // eslint-disable-next-line no-console - onChange={(str, date) => console.log('onChange', str, date)} + onChange={(_event, str, date) => console.log('onChange', str, date)} /> ); diff --git a/packages/react-core/src/components/DatePicker/examples/DatePickerControlled.tsx b/packages/react-core/src/components/DatePicker/examples/DatePickerControlled.tsx index a55469bfce6..e64771fbf59 100644 --- a/packages/react-core/src/components/DatePicker/examples/DatePickerControlled.tsx +++ b/packages/react-core/src/components/DatePicker/examples/DatePickerControlled.tsx @@ -7,7 +7,7 @@ export const DatePickerControlled: React.FunctionComponent = () => { return ( - setValue(value)} /> + setValue(value)} /> ); }; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DatePickerDemo/DatePickerDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DatePickerDemo/DatePickerDemo.tsx index a83cc65401e..3dba32c7427 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DatePickerDemo/DatePickerDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/DatePickerDemo/DatePickerDemo.tsx @@ -13,7 +13,7 @@ export const DatePickerDemo = () => { return ( <> - setValue(value)} validators={[rangeValidator]} /> + setValue(value)} validators={[rangeValidator]} />