[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('');
+ });
  });
  });