[fields] Unify fields behavior regardless of readOnly flag (#13688)

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

@@ -182,8 +182,7 @@ export const useFieldV6TextField: UseFieldTextField<false> = (params) => {
       getActiveSectionIndexFromDOM: () => {
         const browserStartIndex = inputRef.current!.selectionStart ?? 0;
         const browserEndIndex = inputRef.current!.selectionEnd ?? 0;
-        const isInputReadOnly = !!inputRef.current?.readOnly;
-        if ((browserStartIndex === 0 && browserEndIndex === 0) || isInputReadOnly) {
+        if (browserStartIndex === 0 && browserEndIndex === 0) {
           return null;
         }
 
@@ -207,10 +206,6 @@ export const useFieldV6TextField: UseFieldTextField<false> = (params) => {
   );
 
   const syncSelectionFromDOM = () => {
-    if (readOnly) {
-      setSelectedSections(null);
-      return;
-    }
     const browserStartIndex = inputRef.current!.selectionStart ?? 0;
     let nextSectionIndex: number;
     if (browserStartIndex <= sections[0].startInInput) {
@@ -240,7 +235,7 @@ export const useFieldV6TextField: UseFieldTextField<false> = (params) => {
         return;
       }
 
-      if (activeSectionIndex != null || readOnly) {
+      if (activeSectionIndex != null) {
         return;
       }
 

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

@@ -289,7 +289,7 @@ export const useFieldV7TextField: UseFieldTextField<true> = (params) => {
     (sectionIndex: number) => (event: React.MouseEvent<HTMLDivElement>) => {
       // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
       // We avoid this by checking if the call to this function is actually intended, or a side effect.
-      if (event.isDefaultPrevented() || readOnly) {
+      if (event.isDefaultPrevented()) {
         return;
       }
 
@@ -303,10 +303,6 @@ export const useFieldV7TextField: UseFieldTextField<true> = (params) => {
   });
 
   const getInputContentFocusHandler = useEventCallback((sectionIndex: number) => () => {
-    if (readOnly) {
-      return;
-    }
-
     setSelectedSections(sectionIndex);
   });
 

test/e2e/fixtures/DatePicker/MobileDatePickerV6WithClearAction.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+export default function MobileDatePickerV6WithClearAction() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <MobileDatePicker
+        label="Mobile Date Picker"
+        defaultValue={dayjs('2022-04-17')}
+        slotProps={{
+          actionBar: {
+            actions: ['clear', 'cancel', 'accept'],
+          },
+        }}
+      />
+    </LocalizationProvider>
+  );
+}

test/e2e/index.test.ts

@@ -800,6 +800,19 @@ async function initializeEnvironment(
             '04/11/2022',
           );
         });
+
+        it('should have consistent `placeholder` and `value` behavior', async () => {
+          await renderFixture('DatePicker/MobileDatePickerV6WithClearAction');
+
+          const input = page.getByRole('textbox');
+
+          await input.click({ position: { x: 10, y: 2 } });
+          await page.getByRole('button', { name: 'Clear' }).click();
+
+          await input.blur();
+          expect(await input.getAttribute('placeholder')).to.equal('MM/DD/YYYY');
+          expect(await input.inputValue()).to.equal('');
+        });
       });
     });