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

… `readOnly` (#12605)

package.json

@@ -85,7 +85,7 @@
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
     "@mui/icons-material": "^5.15.7",
     "@mui/material": "^5.15.7",
-    "@mui/monorepo": "https://github.com/mui/material-ui#e1231ee8c18ff93b5129cfb5ff7c7e30ad8743e3",
+    "@mui/monorepo": "https://github.com/mui/material-ui#v5.15.7",
     "@mui/utils": "^5.15.7",
     "@next/eslint-plugin-next": "^14.0.4",
     "@octokit/plugin-retry": "^6.0.1",

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

@@ -5,11 +5,13 @@ 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,
+  getTextbox,
 } from 'test/utils/pickers';
 
 const getPickerDay = (name: string, picker = 'January 2018'): HTMLButtonElement =>
@@ -84,6 +86,17 @@ 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', () => {
+      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

@@ -347,7 +347,7 @@ const useSingleInputFieldSlotProps = <TDate, TView extends DateOrTimeViewWithMer
       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/useField.ts

@@ -515,7 +515,8 @@ export const useField = <
     getActiveSectionIndex: () => {
       const browserStartIndex = inputRef.current!.selectionStart ?? 0;
       const browserEndIndex = inputRef.current!.selectionEnd ?? 0;
-      if (browserStartIndex === 0 && browserEndIndex === 0) {
+      const isInputReadOnly = !!inputRef.current?.readOnly;
+      if ((browserStartIndex === 0 && browserEndIndex === 0) || isInputReadOnly) {
         return null;
       }
 

test/e2e/fixtures/DatePicker/ReadonlyDesktopDateRangePickerSingle.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/index.test.ts

@@ -587,6 +587,7 @@ async function initializeEnvironment(
           expect(await input.inputValue()).to.equal('02/11/2022');
         });
       });
+
       describe('<MobileDatePicker />', () => {
         it('should allow selecting a value', async () => {
           await renderFixture('DatePicker/BasicMobileDatePicker');
@@ -604,6 +605,7 @@ async function initializeEnvironment(
         });
       });
     });
+
     describe('<DesktopDateTimePicker />', () => {
       it('should allow selecting a value', async () => {
         await renderFixture('DatePicker/BasicDesktopDateTimePicker');
@@ -693,6 +695,7 @@ async function initializeEnvironment(
         });
       });
     });
+
     describe('<DateRangePicker />', () => {
       it('should allow selecting a range value', async () => {
         // firefox in CI is not happy with this test
@@ -738,6 +741,28 @@ async function initializeEnvironment(
 
         await page.waitForSelector('[role="tooltip"]', { state: 'detached' });
       });
+
+      it('should have the same selection process when "readOnly" with single input field', async () => {
+        // firefox in CI is not happy with this test
+        if (browserType.name() === 'firefox') {
+          return;
+        }
+
+        await renderFixture('DatePicker/ReadonlyDesktopDateRangePickerSingle');
+
+        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');
+      });
     });
   });
 });

yarn.lock

@@ -1881,9 +1881,9 @@
     react-is "^18.2.0"
     react-transition-group "^4.4.5"
 
-"@mui/monorepo@https://github.com/mui/material-ui#e1231ee8c18ff93b5129cfb5ff7c7e30ad8743e3":
+"@mui/monorepo@https://github.com/mui/material-ui#v5.15.7":
   version "5.15.7"
-  resolved "https://github.com/mui/material-ui#e1231ee8c18ff93b5129cfb5ff7c7e30ad8743e3"
+  resolved "https://github.com/mui/material-ui#b80acd69c7c848709d01465d6727b13ed6109258"
   dependencies:
     "@googleapis/sheets" "^5.0.5"
     "@slack/bolt" "^3.17.1"