fix(DatePicker): correct focus behaviour when picker has closed (#4622)

Fixes [this
issue](https://dnb-it.slack.com/archives/CMXABCHEY/p1740129052576499)

---------

Co-authored-by: -l <anderslangseth@gmail.com>

Author: joakbjerk

packages/dnb-eufemia/src/components/date-picker/DatePicker.tsx

@@ -70,13 +70,16 @@ export type DatePickerEventAttributes = {
 // Takes the return object from DatePickerProvider and extends it with the event
 export type DatePickerEvent<T> = ReturnObject<T>
 
+type FocusOnHide = { focusOnHide?: boolean | string }
+
 export type DisplayPickerEvent = (
   | React.MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLElement>
   | MouseEvent
   | KeyboardEvent
+  | FocusOnHide
 ) &
-  DatePickerDates & {
-    focusOnHide?: boolean | string
+  DatePickerDates &
+  FocusOnHide & {
     event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
   }
 
@@ -745,7 +748,7 @@ function DatePicker(externalProps: DatePickerAllProps) {
       | React.KeyboardEvent<HTMLTableElement>
     >) => {
       if (shouldHidePicker && !showSubmitButton && !showCancelButton) {
-        hidePicker()
+        hidePicker({ focusOnHide: true })
       }
 
       setDates({ startDate: args.startDate, endDate: args.endDate })

packages/dnb-eufemia/src/components/date-picker/DatePickerAddon.tsx

@@ -99,7 +99,7 @@ function DatePickerAddon(props: DatePickerAddonProps) {
       })
 
       if (shortcut.close_on_select) {
-        hidePicker(event)
+        hidePicker({ ...event, focusOnHide: true })
       }
     },
     [callOnChange, currentDates, hidePicker]

packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx

@@ -25,6 +25,7 @@ import {
 } from '../DatePickerCalc'
 import { fireEvent, render, waitFor, screen } from '@testing-library/react'
 import { Provider } from '../../../shared'
+import Input from '../../input/Input'
 
 describe('DatePicker component', () => {
   it('renders with props as an object', () => {
@@ -2409,6 +2410,44 @@ describe('DatePicker component', () => {
 
     expect(todayButton).not.toBeDisabled()
   })
+
+  it('should tab to next element after closing date picker', async () => {
+    render(
+      <>
+        <DatePicker
+          noAnimation={true}
+          showInput
+          date={new Date('2025-02-12')}
+        />
+        <Input id="my-input" />
+      </>
+    )
+
+    expect(document.body).toHaveFocus()
+
+    await userEvent.tab()
+    await userEvent.tab()
+    await userEvent.tab()
+    await userEvent.tab()
+    await waitFor(() => {
+      expect(document.querySelector('button')).toHaveFocus()
+    })
+
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => {
+      expect(document.querySelector('table')).toHaveFocus()
+    })
+
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => {
+      expect(document.querySelector('button')).toHaveFocus()
+    })
+
+    await userEvent.tab()
+    await waitFor(() => {
+      expect(document.querySelector('#my-input')).toHaveFocus()
+    })
+  })
 })
 
 // for the unit calc tests