diff --git a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx
index 80a08a1ba58f..833bbdca1169 100644
--- a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx
+++ b/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}`,
diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
index e6c4ab482d38..405cdf2f9885 100644
--- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
+++ b/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);
     }
   });
 
diff --git a/test/e2e/fixtures/DatePicker/BasicDesktopDatePicker.tsx b/test/e2e/fixtures/DatePicker/BasicDesktopDatePicker.tsx
index 34cae29ab091..992dd6244777 100644
--- a/test/e2e/fixtures/DatePicker/BasicDesktopDatePicker.tsx
+++ b/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>
   );
diff --git a/test/e2e/fixtures/DatePicker/BasicDesktopDatePickerV6.tsx b/test/e2e/fixtures/DatePicker/BasicDesktopDatePickerV6.tsx
new file mode 100644
index 000000000000..f94f56265f81
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
index c0c2000ff89d..5da95c6441d9 100644
--- a/test/e2e/index.test.ts
+++ b/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 />', () => {