diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/Examples.tsx index 0a97bcec310..d0b78b622ab 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/Examples.tsx @@ -51,6 +51,9 @@ export const DatePickerRange = () => ( on_cancel={({ start_date, end_date }) => { console.log('on_cancel', start_date, end_date) }} + onBlur={({ start_date, end_date }) => { + console.log('onBlur', start_date, end_date) + }} shortcuts={[ { title: 'Set date period', @@ -96,6 +99,9 @@ export const DatePickerWithInput = () => ( on_cancel={({ date }) => { console.log('on_cancel', date) }} + onBlur={({ date }) => { + console.log('onBlur', date) + }} /> ) @@ -113,6 +119,9 @@ export const DatePickerTrigger = () => ( on_show={({ date }) => { console.log('on_show', date) }} + onBlur={({ start_date, end_date }) => { + console.log('onBlur', start_date, end_date) + }} /> @@ -135,6 +144,9 @@ export const DatePickerHiddenNav = () => ( on_hide={({ date }) => { console.log('on_hide', date) }} + onBlur={({ date }) => { + console.log('onBlur', date) + }} /> ) diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts b/packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts index 2479c83f40b..9189daae741 100644 --- a/packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts +++ b/packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts @@ -25,6 +25,14 @@ type DatePickerSuffix = | React.ReactNode; type DatePickerDirection = 'auto' | 'top' | 'bottom'; type DatePickerAlignPicker = 'auto' | 'left' | 'right'; + +// Make it possible to join React.Event interfaces with DatePickerEvent type. +type DatePickerEvent = T & { + date?: string; + start_date?: string; + end_date?: string; +}; + export interface DatePickerProps extends Omit, 'ref', 'onBlur'>, SpacingProps { @@ -247,7 +255,9 @@ export interface DatePickerProps /** * Will be called once the input loses focus. */ - onBlur?: (event: React.FocusEventHandler) => void; + onBlur?: ( + event: DatePickerEvent> + ) => void; } export default class DatePicker extends React.Component< DatePickerProps, diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.js b/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.js index 6c01c4d1aaf..e733012f689 100644 --- a/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.js +++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.js @@ -327,7 +327,7 @@ export default class DatePickerInput extends React.PureComponent { }) } - onBlurHandler = (e) => { + onBlurHandler = (event) => { this.focusMode = null this.setState({ focusState: 'blur', @@ -335,7 +335,10 @@ export default class DatePickerInput extends React.PureComponent { }) if (this.props.onBlur) { - this.props.onBlur(e) + this.props.onBlur({ + ...event, + ...this.context.getReturnObject({ event }), + }) } } diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx b/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx index 38515250d46..bf5dc0d75cc 100644 --- a/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx +++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx @@ -1496,7 +1496,7 @@ describe('DatePicker component', () => { it('should fire blur event when input loses focus', async () => { const onBlur = jest.fn() - render() + render() const [firstInput, secondInput]: Array = Array.from( document.querySelectorAll('.dnb-input__input') @@ -1512,7 +1512,7 @@ describe('DatePicker component', () => { expect(document.activeElement).not.toBe(firstInput) expect(onBlur).toHaveBeenCalledTimes(1) expect(onBlur).toHaveBeenCalledWith( - expect.objectContaining({ target: firstInput }) + expect.objectContaining({ target: firstInput, date: '2024-01-05' }) ) await userEvent.click(secondInput) @@ -1525,7 +1525,7 @@ describe('DatePicker component', () => { expect(document.activeElement).not.toBe(secondInput) expect(onBlur).toHaveBeenCalledTimes(2) expect(onBlur).toHaveBeenCalledWith( - expect.objectContaining({ target: secondInput }) + expect.objectContaining({ target: secondInput, date: '2024-01-05' }) ) })