From 40a0ba4ac05984ab1385bbfdfd72d059a7d9f029 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Mon, 23 Dec 2024 12:35:16 +0200
Subject: [PATCH 1/3] [fields] Handle focusing container with
 `inputRef.current.focus` on `accessibleFieldDOMStructure`

---
 .../PickersTextField/PickersInputBase/PickersInputBase.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
index 4ea33c8b59b74..f0b98ce8f9765 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
@@ -247,6 +247,10 @@ const PickersInputBase = React.forwardRef(function PickersInputBase(
     onFocus?.(event);
   };
 
+  const handleHiddenInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    handleInputFocus(event);
+  };
+
   const handleInputBlur = (event: React.FocusEvent<HTMLDivElement>) => {
     muiFormControl.onBlur?.(event);
     onBlur?.(event);
@@ -338,6 +342,9 @@ const PickersInputBase = React.forwardRef(function PickersInputBase(
         readOnly={readOnly}
         required={muiFormControl.required}
         disabled={muiFormControl.disabled}
+        // Hidden input element cannot be focused, trigger the root focus instead
+        // This allows to maintain the ability to do `inputRef.current.focus()` to focus the field
+        onFocus={handleHiddenInputFocus}
         {...inputProps}
         ref={handleInputRef}
       />

From 7943aa6f9a6f2d72a8fb3d9d4ee4a8c944bce8b7 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Mon, 30 Dec 2024 16:06:26 +0200
Subject: [PATCH 2/3] Add a test to assert the added behavior

---
 .../tests/selection.DateField.test.tsx        | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

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 b59aba23f70dd..f2256317bcd90 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
@@ -1,6 +1,7 @@
+import * as React from 'react';
 import { expect } from 'chai';
 import { DateField } from '@mui/x-date-pickers/DateField';
-import { act, fireEvent } from '@mui/internal-test-utils';
+import { act, fireEvent, screen } from '@mui/internal-test-utils';
 import {
   createPickerRenderer,
   expectFieldValueV7,
@@ -351,5 +352,22 @@ describe('<DateField /> - Selection', () => {
       fireEvent.keyDown(input, { key: 'ArrowLeft' });
       expect(getCleanedSelectedContent()).to.equal('MM');
     });
+
+    it('should select the first section when `inputRef.current` is focused', () => {
+      const TestCase = () => {
+        const inputRef = React.useRef<HTMLInputElement>(null);
+        return (
+          <React.Fragment>
+            <DateField inputRef={inputRef} />
+            <button onClick={() => inputRef.current?.focus()}>Focus input</button>
+          </React.Fragment>
+        );
+      };
+      render(<TestCase />);
+
+      fireEvent.click(screen.getByRole('button', { name: 'Focus input' }));
+
+      expect(getCleanedSelectedContent()).to.equal('MM');
+    });
   });
 });

From 330ff1a4772dfee16beca52ac35271378b708aad Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Mon, 30 Dec 2024 16:27:48 +0200
Subject: [PATCH 3/3] fix eslint

---
 .../src/DateField/tests/selection.DateField.test.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 f2256317bcd90..217ec4d3ded59 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
@@ -354,7 +354,7 @@ describe('<DateField /> - Selection', () => {
     });
 
     it('should select the first section when `inputRef.current` is focused', () => {
-      const TestCase = () => {
+      function TestCase() {
         const inputRef = React.useRef<HTMLInputElement>(null);
         return (
           <React.Fragment>
@@ -362,7 +362,7 @@ describe('<DateField /> - Selection', () => {
             <button onClick={() => inputRef.current?.focus()}>Focus input</button>
           </React.Fragment>
         );
-      };
+      }
       render(<TestCase />);
 
       fireEvent.click(screen.getByRole('button', { name: 'Focus input' }));