fix(DatePicker): add return object for onBlur (#3178)

dnbexperience · Jan 8, 2024 · 18b3889 · 18b3889
1 parent 2ca216a
commit 18b3889
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
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
@@ -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)
+      }}
     />
   </ComponentBox>
 )
@@ -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)
+        }}
       />
     </ComponentBox>
   </Wrapper>
@@ -135,6 +144,9 @@ export const DatePickerHiddenNav = () => (
       on_hide={({ date }) => {
         console.log('on_hide', date)
       }}
+      onBlur={({ date }) => {
+        console.log('onBlur', date)
+      }}
     />
   </ComponentBox>
 )

diff --git 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 extends T> = T & {
+  date?: string;
+  start_date?: string;
+  end_date?: string;
+};
+
 export interface DatePickerProps
   extends Omit<React.HTMLProps<HTMLElement>, 'ref', 'onBlur'>,
     SpacingProps {
@@ -247,7 +255,9 @@ export interface DatePickerProps
   /**
    * Will be called once the input loses focus.
    */
-  onBlur?: (event: React.FocusEventHandler<HTMLInputElement>) => void;
+  onBlur?: (
+    event: DatePickerEvent<React.FocusEvent<HTMLInputElement>>
+  ) => 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
@@ -327,15 +327,18 @@ export default class DatePickerInput extends React.PureComponent {
     })
   }
 
-  onBlurHandler = (e) => {
+  onBlurHandler = (event) => {
     this.focusMode = null
     this.setState({
       focusState: 'blur',
       _listenForPropChanges: false,
     })
 
     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
@@ -1496,7 +1496,7 @@ describe('DatePicker component', () => {
 
   it('should fire blur event when input loses focus', async () => {
     const onBlur = jest.fn()
-    render(<DatePicker show_input onBlur={onBlur} />)
+    render(<DatePicker show_input onBlur={onBlur} date="2024-01-05" />)
 
     const [firstInput, secondInput]: Array<HTMLInputElement> = 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' })
     )
   })