From 4afe88f6d2e8354b58d3e273df3b3c158273080e Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Mon, 19 Feb 2024 18:21:04 +0200
Subject: [PATCH] [pickers] Fix `referenceDate` day calendar focus (#12136)

---
 .../src/DateCalendar/tests/DateCalendar.test.tsx           | 7 +++++--
 .../x-date-pickers/src/DateCalendar/useCalendarState.tsx   | 5 ++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
index b3f59b807876..41042aaf6049 100644
--- a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
@@ -183,14 +183,17 @@ describe('<DateCalendar />', () => {
       render(
         <DateCalendar
           onChange={onChange}
-          referenceDate={adapterToUse.date(new Date(2018, 0, 1, 12, 30))}
+          referenceDate={adapterToUse.date(new Date(2022, 3, 17, 12, 30))}
           view="day"
         />,
       );
 
+      // should make the reference day firstly focusable
+      expect(screen.getByRole('gridcell', { name: '17' })).to.have.attribute('tabindex', '0');
+
       userEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
       expect(onChange.callCount).to.equal(1);
-      expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2018, 0, 2, 12, 30));
+      expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 3, 2, 12, 30));
     });
 
     it('should not use `referenceDate` when a value is defined', () => {
diff --git a/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx b/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx
index 45d07ae46dcb..440fa628f4dd 100644
--- a/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { SlideDirection } from './PickersSlideTransition';
 import { useIsDateDisabled } from './useIsDateDisabled';
-import { useUtils, useNow } from '../internals/hooks/useUtils';
+import { useUtils } from '../internals/hooks/useUtils';
 import { MuiPickersAdapter, PickersTimezone } from '../models';
 import { DateCalendarDefaultizedProps } from './DateCalendar.types';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
@@ -127,7 +127,6 @@ export const useCalendarState = <TDate extends unknown>(params: UseCalendarState
     timezone,
   } = params;
 
-  const now = useNow<TDate>(timezone);
   const utils = useUtils<TDate>();
 
   const reducerFn = React.useRef(
@@ -162,7 +161,7 @@ export const useCalendarState = <TDate extends unknown>(params: UseCalendarState
 
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
-    focusedDay: utils.isValid(value) ? value! : now,
+    focusedDay: referenceDate,
     currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left',
   });