feat(DatePicker): add onFocus event (#3188)

dnbexperience · Jan 8, 2024 · 2062213 · 2062213
1 parent eb6417f
commit 2062213
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 1 deletion.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/events.mdx
@@ -16,6 +16,7 @@ import { DatePickerDateFnsRangeIsWeekend } from 'Docs/uilib/components/date-pick
 | `on_show`        | _(optional)_ will be called once date-picker is visible.                                                                |
 | `on_hide`        | _(optional)_ will be called once date-picker is hidden.                                                                 |
 | `on_days_render` | _(optional)_ will be called right before every new calendar view gets rendered. See the example above.                  |
+| `onFocus`        | _(optional)_ will be called once the input gets focus.                                                                  |
 | `onBlur`         | _(optional)_ will be called once the input lose focus.                                                                  |
 
 ## Returned Object

diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts b/packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts
@@ -252,6 +252,10 @@ export interface DatePickerProps
    * Will be called once a user presses the reset button.
    */
   on_reset?: (...args: any[]) => any;
+  /**
+   * Will be called once the input gets focus.
+   */
+  onFocus?: (event: React.FocusEventHandler<HTMLInputElement>) => void;
   /**
    * Will be called once the input loses focus.
    */

diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePicker.js b/packages/dnb-eufemia/src/components/date-picker/DatePicker.js
@@ -673,7 +673,6 @@ export default class DatePicker extends React.PureComponent {
                   locale={locale}
                   {...attributes}
                   submitAttributes={submitParams}
-                  onFocus={this.showPicker}
                   onSubmit={this.togglePicker}
                   {...status_props}
                 />

diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.js b/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.js
@@ -325,6 +325,13 @@ export default class DatePickerInput extends React.PureComponent {
       focusState: 'focus',
       _listenForPropChanges: false,
     })
+
+    if (this.props.onFocus) {
+      this.props.onFocus({
+        ...event,
+        ...this.context.getReturnObject({ event }),
+      })
+    }
   }
 
   onBlurHandler = (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
@@ -1494,6 +1494,41 @@ describe('DatePicker component', () => {
     expect(thirdDateButton.children[2]).toHaveTextContent('24')
   })
 
+  it('should fire fire event when input gets focus', async () => {
+    const onFocus = jest.fn()
+    render(<DatePicker show_input onFocus={onFocus} date="2024-01-05" />)
+
+    const [firstInput, secondInput]: Array<HTMLInputElement> = Array.from(
+      document.querySelectorAll('.dnb-input__input')
+    )
+
+    await userEvent.click(firstInput)
+
+    expect(onFocus).toHaveBeenCalledTimes(1)
+    expect(document.activeElement).toBe(firstInput)
+
+    await userEvent.click(document.body)
+
+    expect(document.activeElement).not.toBe(firstInput)
+    expect(onFocus).toHaveBeenCalledTimes(1)
+    expect(onFocus).toHaveBeenCalledWith(
+      expect.objectContaining({ target: firstInput, date: '2024-01-05' })
+    )
+
+    await userEvent.click(secondInput)
+
+    expect(onFocus).toHaveBeenCalledTimes(2)
+    expect(document.activeElement).toBe(secondInput)
+
+    await userEvent.click(document.body)
+
+    expect(document.activeElement).not.toBe(secondInput)
+    expect(onFocus).toHaveBeenCalledTimes(2)
+    expect(onFocus).toHaveBeenCalledWith(
+      expect.objectContaining({ target: secondInput, date: '2024-01-05' })
+    )
+  })
+
   it('should fire blur event when input loses focus', async () => {
     const onBlur = jest.fn()
     render(<DatePicker show_input onBlur={onBlur} date="2024-01-05" />)