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]