diff --git a/packages/react-component-library/src/components/DatePicker/DatePicker.test.tsx b/packages/react-component-library/src/components/DatePicker/DatePicker.test.tsx index e98be0bdf7..23ee995ec3 100644 --- a/packages/react-component-library/src/components/DatePicker/DatePicker.test.tsx +++ b/packages/react-component-library/src/components/DatePicker/DatePicker.test.tsx @@ -612,6 +612,22 @@ describe('DatePicker', () => { }) }) + describe('when a single date picker with a value is rendered and the picker is opened', () => { + beforeEach(() => { + wrapper = render( + + ) + + return user.click(wrapper.getByTestId('datepicker-input-button')) + }) + + it('focuses the current date', () => { + expect( + wrapper.getByRole('button', { name: '18th January (Tuesday)' }) + ).toHaveFocus() + }) + }) + describe('when a single date picker is rendered and the picker is opened', () => { beforeEach(() => { wrapper = render() @@ -623,12 +639,10 @@ describe('DatePicker', () => { expect(wrapper.getByText('December 2019')).toBeInTheDocument() }) - it('focuses the previous month button', () => { - return waitFor(() => - expect( - wrapper.getByLabelText(PREVIOUS_MONTH_BUTTON_LABEL) - ).toHaveFocus() - ) + it('focuses the current date', () => { + expect( + wrapper.getByRole('button', { name: '5th December (Thursday)' }) + ).toHaveFocus() }) describe('when Shift-Tab is pressed once', () => { @@ -638,7 +652,7 @@ describe('DatePicker', () => { it('traps the focus within the picker', () => { expect( - wrapper.getByRole('button', { name: '5th December (Thursday)' }) + wrapper.getByLabelText(PREVIOUS_MONTH_BUTTON_LABEL) ).toHaveFocus() }) @@ -649,7 +663,7 @@ describe('DatePicker', () => { it('still traps the focus within the picker', () => { expect( - wrapper.getByLabelText(PREVIOUS_MONTH_BUTTON_LABEL) + wrapper.getByRole('button', { name: '5th December (Thursday)' }) ).toHaveFocus() }) }) diff --git a/packages/react-component-library/src/components/DatePicker/DatePicker.tsx b/packages/react-component-library/src/components/DatePicker/DatePicker.tsx index 9a45db9408..c55a1741c0 100644 --- a/packages/react-component-library/src/components/DatePicker/DatePicker.tsx +++ b/packages/react-component-library/src/components/DatePicker/DatePicker.tsx @@ -354,6 +354,7 @@ export const DatePicker: React.FC = ({ onDayMouseLeave={handleDayBlurOrMouseLeave} onDayFocus={handleDayFocusOrMouseEnter} onDayBlur={handleDayBlurOrMouseLeave} + initialFocus /> diff --git a/packages/react-component-library/src/components/DatePicker/useFocusTrapOptions.ts b/packages/react-component-library/src/components/DatePicker/useFocusTrapOptions.ts index 8485cbee05..4f6d9bbed5 100644 --- a/packages/react-component-library/src/components/DatePicker/useFocusTrapOptions.ts +++ b/packages/react-component-library/src/components/DatePicker/useFocusTrapOptions.ts @@ -21,6 +21,7 @@ export function useFocusTrapOptions( isEventTargetDescendantOf(event, clickAllowedElementRefs), clickOutsideDeactivates: (event) => !isEventTargetDescendantOf(event, clickAllowedElementRefs), + initialFocus: false, onDeactivate: close, }), [clickAllowedElementRefs, close]