[DateRangePicker] Avoid unnecessary field section focusing (@LukasTy) (#16569)

Signed-off-by: Lukas Tyla <[email protected]>
Co-authored-by: Lukas Tyla <[email protected]>

Author: github-actions[bot]

packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts

@@ -202,6 +202,7 @@ const useMultiInputFieldSlotProps = <
     }
 
     // bring back focus to the field
+    // currentView is present on DateTimeRangePicker
     currentFieldRef.current.setSelectedSections(
       // use the current view or `0` when the range position has just been swapped
       previousRangePosition.current === rangePosition ? currentView : 0,

packages/x-date-pickers-pro/src/internals/hooks/useRangePosition.ts

@@ -48,6 +48,15 @@ export const useRangePosition = (
 
     const sections = singleInputFieldRef.current.getSections();
     const targetActiveSectionIndex = newRangePosition === 'start' ? 0 : sections.length / 2;
+    const activeSectionIndex = singleInputFieldRef.current.getActiveSectionIndex();
+    // if the active section is already within the target range, we don't need to update it.
+    if (
+      activeSectionIndex &&
+      activeSectionIndex >= targetActiveSectionIndex &&
+      activeSectionIndex < targetActiveSectionIndex + sections.length / 2
+    ) {
+      return;
+    }
     singleInputFieldRef.current.setSelectedSections(targetActiveSectionIndex);
   };
 

packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts

@@ -201,6 +201,9 @@ export const useFieldV6TextField: UseFieldTextField<false> = (params) => {
         return nextSectionIndex === -1 ? sections.length - 1 : nextSectionIndex - 1;
       },
       focusField: (newSelectedSection = 0) => {
+        if (getActiveElement(document) === inputRef.current) {
+          return;
+        }
         inputRef.current?.focus();
         setSelectedSections(newSelectedSection);
       },

packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts

@@ -114,7 +114,11 @@ export const useFieldV7TextField: UseFieldTextField<true> = (params) => {
         return sectionListRef.current.getSectionIndexFromDOMElement(activeElement);
       },
       focusField: (newSelectedSections = 0) => {
-        if (!sectionListRef.current) {
+        if (
+          !sectionListRef.current ||
+          // if the field is already focused, we don't need to focus it again
+          interactions.getActiveSectionIndexFromDOM() != null
+        ) {
           return;
         }
 

test/e2e/fixtures/DatePicker/DesktopDateRangePickerWithValue.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+export default function BasicDesktopDateRangePicker() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateRangePicker
+        defaultValue={[dayjs('2024-04-12'), dayjs('2024-04-14')]}
+        enableAccessibleFieldDOMStructure
+      />
+    </LocalizationProvider>
+  );
+}

test/e2e/index.test.ts

@@ -1057,6 +1057,38 @@ async function initializeEnvironment(
           'MUI X: The timezone of the start and the end date should be the same.',
         );
       });
+
+      it('should keep the focus on the clicked section', async () => {
+        // firefox in CI is not happy with this test
+        if (browserType.name() === 'firefox') {
+          return;
+        }
+        await renderFixture('DatePicker/DesktopDateRangePickerWithValue');
+
+        const startDaySection = page.getByRole('spinbutton', { name: 'Day' }).first();
+        await startDaySection.click();
+        expect(await page.evaluate(() => document.activeElement?.textContent)).to.equal('12');
+
+        const endYearSection = page.getByRole('spinbutton', { name: 'Year' }).last();
+        await endYearSection.click();
+        expect(await page.evaluate(() => document.activeElement?.textContent)).to.equal('2024');
+      });
+
+      it('should keep the focus on the clicked section with single input field', async () => {
+        // firefox in CI is not happy with this test
+        if (browserType.name() === 'firefox') {
+          return;
+        }
+        await renderFixture('DatePicker/SingleDesktopDateRangePickerWithTZ');
+
+        const startDaySection = page.getByRole('spinbutton', { name: 'Day' }).first();
+        await startDaySection.click();
+        expect(await page.evaluate(() => document.activeElement?.textContent)).to.equal('12');
+
+        const endYearSection = page.getByRole('spinbutton', { name: 'Year' }).last();
+        await endYearSection.click();
+        expect(await page.evaluate(() => document.activeElement?.textContent)).to.equal('2024');
+      });
     });
   });
 });