[fields] Fix input refocusing after clearing a value (mui#12587)

packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx

@@ -184,7 +184,7 @@ describe('<DateField /> - Selection', () => {
  });
 
  it('should select all sections with start separator', () => {
- // Test with v6 input
+ // Test with v7 input
  const v7Response = renderWithProps({
  enableAccessibleFieldDOMStructure: true,
  format: `- ${adapterToUse.formats.year}`,

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

@@ -275,10 +275,12 @@ export const useField = <
  event.preventDefault();
  onClear?.(event, ...(args as []));
  clearValue();
- setSelectedSections(sectionOrder.startIndex);
 
- if (!interactions.isFieldFocused) {
+ if (!interactions.isFieldFocused()) {
+ // setSelectedSections is called internally
  interactions.focusField(0);
+ } else {
+ setSelectedSections(sectionOrder.startIndex);
  }
  });
 

test/e2e/fixtures/DatePicker/BasicDesktopDatePicker.tsx

@@ -10,6 +10,7 @@ export default function BasicDesktopDatePicker() {
  enableAccessibleFieldDOMStructure
  label="Desktop Date Picker"
  className="test-date-picker"
+ slotProps={{ field: { clearable: true } }}
  />
  </LocalizationProvider>
  );

test/e2e/fixtures/DatePicker/BasicDesktopDatePickerV6.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+export default function BasicDesktopDatePickerV6() {
+ return (
+ <LocalizationProvider dateAdapter={AdapterDayjs}>
+ <DesktopDatePicker
+ label="Desktop Date Picker"
+ className="test-date-picker"
+ slotProps={{ field: { clearable: true } }}
+ />
+ </LocalizationProvider>
+ );
+}

test/e2e/index.test.ts

@@ -563,9 +563,9 @@ async function initializeEnvironment(
  await page.locator(`.${pickersSectionListClasses.root}`).click();
  await input.fill('02/12/2020');
 
- expect(await page.getByRole('button').getAttribute('aria-label')).to.equal(
- 'Choose date, selected date is Feb 12, 2020',
- );
+ expect(
+ await page.getByRole('button', { name: /Choose date/ }).getAttribute('aria-label'),
+ ).to.equal('Choose date, selected date is Feb 12, 2020');
  });
 
  it('should allow pasting a section', async () => {
@@ -612,6 +612,38 @@ async function initializeEnvironment(
  await monthSection.press('2');
  expect(await input.inputValue()).to.equal('02/11/2022');
  });
+
+ it('should focus the first field section after clearing a value', async () => {
+ await renderFixture('DatePicker/BasicDesktopDatePicker');
+
+ const monthSection = page.getByRole('spinbutton', { name: 'Month' });
+ await monthSection.press('2');
+ await page.getByRole('button', { name: 'Clear value' }).click();
+
+ expect(await page.evaluate(() => document.activeElement?.textContent)).to.equal('MM');
+ });
+
+ it('should focus the first field section after clearing a value in v6 input', async () => {
+ await renderFixture('DatePicker/BasicDesktopDatePickerV6');
+
+ await page.getByRole('textbox').fill('2');
+ await page.getByRole('button', { name: 'Clear value' }).click();
+
+ // firefox does not support document.getSelection().toString() on input elements
+ if (browserType.name() === 'firefox') {
+ expect(
+ await page.evaluate(() => {
+ return (
+ document.activeElement?.tagName === 'INPUT' &&
+ // only focused input has value set
+ (document.activeElement as HTMLInputElement)?.value === 'MM/DD/YYYY'
+ );
+ }),
+ ).to.equal(true);
+ } else {
+ expect(await page.evaluate(() => document.getSelection()?.toString())).to.equal('MM');
+ }
+ });
  });
 
  describe('<MobileDatePicker />', () => {