From 390211c97cccfe726dfd7aeadbd6016906ea99c5 Mon Sep 17 00:00:00 2001
From: Rajat <robertdoweny2301@gmail.com>
Date: Tue, 31 Dec 2024 17:53:50 +0530
Subject: [PATCH] [docs] Fix `EditingWithDatePickers` demo (#15967)

---
 .../custom-columns/EditingWithDatePickers.js        | 13 ++++++++++---
 .../custom-columns/EditingWithDatePickers.tsx       | 12 ++++++++++--
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js
index 22d625bd568c6..8384fbb1d03d9 100644
--- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js
+++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js
@@ -17,7 +17,7 @@ import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { enUS as locale } from 'date-fns/locale';
 import format from 'date-fns/format';
-
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 /**
  * `date` column
  */
@@ -41,15 +41,21 @@ const dateColumnType = {
   },
 };
 
-function GridEditDateCell({ id, field, value, colDef }) {
+function GridEditDateCell({ id, field, value, colDef, hasFocus }) {
   const apiRef = useGridApiContext();
-
+  const inputRef = React.useRef(null);
   const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker;
 
   const handleChange = (newValue) => {
     apiRef.current.setEditCellValue({ id, field, value: newValue });
   };
 
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+
   return (
     <Component
       value={value}
@@ -57,6 +63,7 @@ function GridEditDateCell({ id, field, value, colDef }) {
       onChange={handleChange}
       slotProps={{
         textField: {
+          inputRef,
           variant: 'standard',
           fullWidth: true,
           sx: {
diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx
index 92d5206e7ae54..ff26d3a5a238c 100644
--- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx
+++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx
@@ -22,7 +22,7 @@ import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { enUS as locale } from 'date-fns/locale';
 import format from 'date-fns/format';
-
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 /**
  * `date` column
  */
@@ -51,15 +51,22 @@ function GridEditDateCell({
   field,
   value,
   colDef,
+  hasFocus,
 }: GridRenderEditCellParams<any, Date | null, string>) {
   const apiRef = useGridApiContext();
-
+  const inputRef = React.useRef<HTMLInputElement>(null);
   const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker;
 
   const handleChange = (newValue: unknown) => {
     apiRef.current.setEditCellValue({ id, field, value: newValue });
   };
 
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      inputRef.current!.focus();
+    }
+  }, [hasFocus]);
+
   return (
     <Component
       value={value}
@@ -67,6 +74,7 @@ function GridEditDateCell({
       onChange={handleChange}
       slotProps={{
         textField: {
+          inputRef,
           variant: 'standard',
           fullWidth: true,
           sx: {