[DateRangePicker] Fix selection behavior with single input field when…

… readonly (#12593)

packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx

@@ -5,12 +5,14 @@ import { screen, fireEvent, userEvent, act, getByRole } from '@mui-internal/test
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
 import { DateRange, LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
 import {
   createPickerRenderer,
   adapterToUse,
   AdapterClassToUse,
   openPicker,
   getFieldSectionsContainer,
+  getTextbox,
 } from 'test/utils/pickers';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
@@ -87,6 +89,33 @@ describe('<DesktopDateRangePicker />', () => {
     expect(screen.queryByText('Fim')).not.to.equal(null);
   });
 
+  describe('Field slot: SingleInputDateRangeField', () => {
+    it('should add focused class to the field when it is focused', () => {
+      // test v7 behavior
+      const response = render(
+        <DesktopDateRangePicker
+          enableAccessibleFieldDOMStructure
+          slots={{ field: SingleInputDateRangeField }}
+        />,
+      );
+
+      const sectionsContainer = getFieldSectionsContainer();
+      act(() => sectionsContainer.focus());
+
+      expect(sectionsContainer.parentElement).to.have.class('Mui-focused');
+
+      response.unmount();
+
+      // test v6 behavior
+      render(<DesktopDateRangePicker slots={{ field: SingleInputDateRangeField }} />);
+
+      const input = getTextbox();
+      act(() => input.focus());
+
+      expect(input.parentElement).to.have.class('Mui-focused');
+    });
+  });
+
   describe('Component slot: Popper', () => {
     it('should forward onClick and onTouchStart', () => {
       const handleClick = spy();

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

@@ -431,7 +431,7 @@ const useSingleInputFieldSlotProps = <
       ref: anchorRef,
       ...fieldProps?.InputProps,
     },
-    focused: open,
+    focused: open ? true : undefined,
     ...(labelId != null && { id: labelId }),
     ...(wrapperVariant === 'mobile' && { readOnly: true }),
     // registering `onClick` listener on the root element as well to correctly handle cases where user is clicking on `label`

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

@@ -196,7 +196,6 @@ export const useFieldV6TextField: UseFieldTextField<false> = (params) => {
 
   const syncSelectionFromDOM = () => {
     if (readOnly) {
-      setSelectedSections(null);
       return;
     }
     const browserStartIndex = inputRef.current!.selectionStart ?? 0;

test/e2e/fixtures/DatePicker/ReadonlyDesktopDateRangePickerSingleV6.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+export default function ReadonlyDesktopDateRangePickerSingleV6() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateRangePicker
+        slots={{ field: SingleInputDateRangeField }}
+        slotProps={{ field: { readOnly: true } }}
+      />
+    </LocalizationProvider>
+  );
+}

test/e2e/fixtures/DatePicker/ReadonlyDesktopDateRangePickerSingleV7.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+export default function ReadonlyDesktopDateRangePickerSingleV7() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateRangePicker
+        enableAccessibleFieldDOMStructure
+        slots={{ field: SingleInputDateRangeField }}
+        slotProps={{ field: { readOnly: true } }}
+      />
+    </LocalizationProvider>
+  );
+}

test/e2e/index.test.ts

@@ -803,6 +803,52 @@ async function initializeEnvironment(
 
         await page.waitForSelector('[role="tooltip"]', { state: 'detached' });
       });
+
+      it('should have the same selection process when "readOnly" with single input v7 field', async () => {
+        // firefox in CI is not happy with this test
+        if (browserType.name() === 'firefox') {
+          return;
+        }
+
+        await renderFixture('DatePicker/ReadonlyDesktopDateRangePickerSingleV7');
+
+        await page.locator(`.${pickersSectionListClasses.root}`).first().click();
+
+        // assert that the tooltip has been opened
+        await page.waitForSelector('[role="tooltip"]', { state: 'attached' });
+
+        await page.getByRole('gridcell', { name: '11' }).first().click();
+        await page.getByRole('gridcell', { name: '13' }).first().click();
+
+        // assert that the tooltip closes after selection is complete
+        await page.waitForSelector('[role="tooltip"]', { state: 'detached' });
+
+        expect(await page.getByRole('textbox', { includeHidden: true }).inputValue()).to.equal(
+          '04/11/2022 – 04/13/2022',
+        );
+      });
+
+      it('should have the same selection process when "readOnly" with single input v6 field', async () => {
+        // firefox in CI is not happy with this test
+        if (browserType.name() === 'firefox') {
+          return;
+        }
+
+        await renderFixture('DatePicker/ReadonlyDesktopDateRangePickerSingleV6');
+
+        await page.getByRole('textbox').click();
+
+        // assert that the tooltip has been opened
+        await page.waitForSelector('[role="tooltip"]', { state: 'attached' });
+
+        await page.getByRole('gridcell', { name: '11' }).first().click();
+        await page.getByRole('gridcell', { name: '13' }).first().click();
+
+        // assert that the tooltip closes after selection is complete
+        await page.waitForSelector('[role="tooltip"]', { state: 'detached' });
+
+        expect(await page.getByRole('textbox').inputValue()).to.equal('04/11/2022 – 04/13/2022');
+      });
     });
   });
 });