From 117ba59122f91f811b0fbb1470c4dea13c51f16c Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Tue, 14 May 2024 09:45:58 +0300
Subject: [PATCH] [pickers] Fix field focusing when switching to view without a
 renderer (#13112)

---
 .../hooks/usePicker/usePickerViews.ts         |  1 +
 .../DesktopDateTimePickerNoTimeRenderers.tsx  | 10 +++++++-
 test/e2e/index.test.ts                        | 23 +++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
index d1262bf8a76eb..47ff028538687 100644
--- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
+++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
@@ -249,6 +249,7 @@ export const usePickerViews = <
     if (currentViewMode === 'field' && open) {
       onClose();
       setTimeout(() => {
+        fieldRef?.current?.setSelectedSections(view);
         // focusing the input before the range selection is done
         // calling it outside of timeout results in an inconsistent behavior between Safari And Chrome
         fieldRef?.current?.focusField(view);
diff --git a/test/e2e/fixtures/DatePicker/DesktopDateTimePickerNoTimeRenderers.tsx b/test/e2e/fixtures/DatePicker/DesktopDateTimePickerNoTimeRenderers.tsx
index 2e3f9e92ce95f..25f1a8492476a 100644
--- a/test/e2e/fixtures/DatePicker/DesktopDateTimePickerNoTimeRenderers.tsx
+++ b/test/e2e/fixtures/DatePicker/DesktopDateTimePickerNoTimeRenderers.tsx
@@ -1,13 +1,21 @@
 import * as React from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
 export default function DesktopDateTimePickerNoTimeRenderers() {
+  const [searchParams] = useSearchParams();
+  const enableAccessibleFieldDOMStructureParam = searchParams.get(
+    'enableAccessibleFieldDOMStructure',
+  );
+  const enableAccessibleFieldDOMStructure = enableAccessibleFieldDOMStructureParam
+    ? enableAccessibleFieldDOMStructureParam !== 'false'
+    : true;
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DesktopDateTimePicker
-        enableAccessibleFieldDOMStructure
+        enableAccessibleFieldDOMStructure={enableAccessibleFieldDOMStructure}
         label="Desktop Date Time Picker"
         viewRenderers={{
           hours: null,
diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
index 866ae9c5c89d0..269457579606a 100644
--- a/test/e2e/index.test.ts
+++ b/test/e2e/index.test.ts
@@ -875,6 +875,29 @@ async function initializeEnvironment(
           expect(await page.evaluate(() => document.activeElement?.textContent)).to.equal('12');
         });
       });
+
+      it('should correctly select hours section when there are no time renderers on v6', async () => {
+        await renderFixture(
+          'DatePicker/DesktopDateTimePickerNoTimeRenderers?enableAccessibleFieldDOMStructure=false',
+        );
+
+        await page.getByRole('button').click();
+        await page.getByRole('gridcell', { name: '11' }).click();
+
+        // assert that the hours section has been selected using two APIs
+        await waitFor(async () => {
+          // firefox does not support document.getSelection().toString() on input elements
+          if (browserType.name() === 'firefox') {
+            expect(
+              await page.evaluate(
+                () => (document.activeElement as HTMLInputElement | null)?.selectionStart,
+              ),
+            ).to.equal(11);
+          } else {
+            expect(await page.evaluate(() => document.getSelection()?.toString())).to.equal('12');
+          }
+        });
+      });
     });
 
     describe('<DateRangePicker />', () => {