Skip to content

Commit b20ed69

Browse files
joakbjerklangz
andauthored
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>
1 parent d333f38 commit b20ed69

File tree

3 files changed

+46
-4
lines changed

3 files changed

+46
-4
lines changed

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

+6-3
Original file line numberDiff line numberDiff line change
@@ -70,13 +70,16 @@ export type DatePickerEventAttributes = {
7070
// Takes the return object from DatePickerProvider and extends it with the event
7171
export type DatePickerEvent<T> = ReturnObject<T>
7272

73+
type FocusOnHide = { focusOnHide?: boolean | string }
74+
7375
export type DisplayPickerEvent = (
7476
| React.MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLElement>
7577
| MouseEvent
7678
| KeyboardEvent
79+
| FocusOnHide
7780
) &
78-
DatePickerDates & {
79-
focusOnHide?: boolean | string
81+
DatePickerDates &
82+
FocusOnHide & {
8083
event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
8184
}
8285

@@ -745,7 +748,7 @@ function DatePicker(externalProps: DatePickerAllProps) {
745748
| React.KeyboardEvent<HTMLTableElement>
746749
>) => {
747750
if (shouldHidePicker && !showSubmitButton && !showCancelButton) {
748-
hidePicker()
751+
hidePicker({ focusOnHide: true })
749752
}
750753

751754
setDates({ startDate: args.startDate, endDate: args.endDate })

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ function DatePickerAddon(props: DatePickerAddonProps) {
9999
})
100100

101101
if (shortcut.close_on_select) {
102-
hidePicker(event)
102+
hidePicker({ ...event, focusOnHide: true })
103103
}
104104
},
105105
[callOnChange, currentDates, hidePicker]

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

+39
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
} from '../DatePickerCalc'
2626
import { fireEvent, render, waitFor, screen } from '@testing-library/react'
2727
import { Provider } from '../../../shared'
28+
import Input from '../../input/Input'
2829

2930
describe('DatePicker component', () => {
3031
it('renders with props as an object', () => {
@@ -2409,6 +2410,44 @@ describe('DatePicker component', () => {
24092410

24102411
expect(todayButton).not.toBeDisabled()
24112412
})
2413+
2414+
it('should tab to next element after closing date picker', async () => {
2415+
render(
2416+
<>
2417+
<DatePicker
2418+
noAnimation={true}
2419+
showInput
2420+
date={new Date('2025-02-12')}
2421+
/>
2422+
<Input id="my-input" />
2423+
</>
2424+
)
2425+
2426+
expect(document.body).toHaveFocus()
2427+
2428+
await userEvent.tab()
2429+
await userEvent.tab()
2430+
await userEvent.tab()
2431+
await userEvent.tab()
2432+
await waitFor(() => {
2433+
expect(document.querySelector('button')).toHaveFocus()
2434+
})
2435+
2436+
await userEvent.keyboard('{Enter}')
2437+
await waitFor(() => {
2438+
expect(document.querySelector('table')).toHaveFocus()
2439+
})
2440+
2441+
await userEvent.keyboard('{Enter}')
2442+
await waitFor(() => {
2443+
expect(document.querySelector('button')).toHaveFocus()
2444+
})
2445+
2446+
await userEvent.tab()
2447+
await waitFor(() => {
2448+
expect(document.querySelector('#my-input')).toHaveFocus()
2449+
})
2450+
})
24122451
})
24132452

24142453
// for the unit calc tests

0 commit comments

Comments
 (0)