From ed833b52ae3e22593663c847fe7331a8ab2a372f Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 11 Jul 2024 14:39:30 +0300
Subject: [PATCH] [fields] Unify fields behavior regardless of `readOnly` flag
 (#13688)

---
 .../hooks/useField/useFieldV6TextField.ts     |  9 ++------
 .../hooks/useField/useFieldV7TextField.ts     |  6 +-----
 .../MobileDatePickerV6WithClearAction.tsx     | 21 +++++++++++++++++++
 test/e2e/index.test.ts                        | 13 ++++++++++++
 4 files changed, 37 insertions(+), 12 deletions(-)
 create mode 100644 test/e2e/fixtures/DatePicker/MobileDatePickerV6WithClearAction.tsx

diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts
index 9dd3d684e0d6..affacc0afeec 100644
--- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts
+++ b/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;
       }
 
diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts
index e198a6b999cb..c50d244f1b1e 100644
--- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts
+++ b/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);
   });
 
diff --git a/test/e2e/fixtures/DatePicker/MobileDatePickerV6WithClearAction.tsx b/test/e2e/fixtures/DatePicker/MobileDatePickerV6WithClearAction.tsx
new file mode 100644
index 000000000000..b78b026bdb6f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
index ea00f52f8c1c..5daa8064aa94 100644
--- a/test/e2e/index.test.ts
+++ b/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('');
+        });
       });
     });