From de9cc14b2cc83f97a3af49dd021f1c0c6a6f4158 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Wed, 12 Jul 2023 18:06:17 -0300
Subject: [PATCH] [docs] Add paragraph about managing focus of custom edit
 components

---
 .../data-grid/editing/CustomEditComponent.js     | 14 ++++++++------
 .../data-grid/editing/CustomEditComponent.tsx    | 14 ++++++++------
 docs/data/data-grid/editing/editing.md           | 16 ++++++++++++++--
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/docs/data/data-grid/editing/CustomEditComponent.js b/docs/data/data-grid/editing/CustomEditComponent.js
index 92c4832ac8a77..8762b22fec6d8 100644
--- a/docs/data/data-grid/editing/CustomEditComponent.js
+++ b/docs/data/data-grid/editing/CustomEditComponent.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Rating from '@mui/material/Rating';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { DataGrid, useGridApiContext } from '@mui/x-data-grid';
 
 function renderRating(params) {
@@ -8,24 +9,25 @@ function renderRating(params) {
 }
 
 function RatingEditInputCell(props) {
-  const { id, value, field } = props;
+  const { id, value, field, hasFocus } = props;
   const apiRef = useGridApiContext();
+  const ref = React.useRef();
 
   const handleChange = (event, newValue) => {
     apiRef.current.setEditCellValue({ id, field, value: newValue });
   };
 
-  const handleRef = (element) => {
-    if (element) {
-      const input = element.querySelector(`input[value="${value}"]`);
+  useEnhancedEffect(() => {
+    if (hasFocus && ref.current) {
+      const input = ref.current.querySelector(`input[value="${value}"]`);
       input?.focus();
     }
-  };
+  }, [hasFocus, value]);
 
   return (
     <Box sx={{ display: 'flex', alignItems: 'center', pr: 2 }}>
       <Rating
-        ref={handleRef}
+        ref={ref}
         name="rating"
         precision={1}
         value={value}
diff --git a/docs/data/data-grid/editing/CustomEditComponent.tsx b/docs/data/data-grid/editing/CustomEditComponent.tsx
index 8569e8dd7ce1b..12e2d1a198365 100644
--- a/docs/data/data-grid/editing/CustomEditComponent.tsx
+++ b/docs/data/data-grid/editing/CustomEditComponent.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Rating from '@mui/material/Rating';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import {
   DataGrid,
   GridRenderCellParams,
@@ -13,26 +14,27 @@ function renderRating(params: GridRenderCellParams<any, number>) {
 }
 
 function RatingEditInputCell(props: GridRenderCellParams<any, number>) {
-  const { id, value, field } = props;
+  const { id, value, field, hasFocus } = props;
   const apiRef = useGridApiContext();
+  const ref = React.useRef<HTMLElement>();
 
   const handleChange = (event: React.SyntheticEvent, newValue: number | null) => {
     apiRef.current.setEditCellValue({ id, field, value: newValue });
   };
 
-  const handleRef = (element: HTMLSpanElement) => {
-    if (element) {
-      const input = element.querySelector<HTMLInputElement>(
+  useEnhancedEffect(() => {
+    if (hasFocus && ref.current) {
+      const input = ref.current.querySelector<HTMLInputElement>(
         `input[value="${value}"]`,
       );
       input?.focus();
     }
-  };
+  }, [hasFocus, value]);
 
   return (
     <Box sx={{ display: 'flex', alignItems: 'center', pr: 2 }}>
       <Rating
-        ref={handleRef}
+        ref={ref}
         name="rating"
         precision={1}
         value={value}
diff --git a/docs/data/data-grid/editing/editing.md b/docs/data/data-grid/editing/editing.md
index 9584ceeb2ecc6..0a2aab4e8f9ef 100644
--- a/docs/data/data-grid/editing/editing.md
+++ b/docs/data/data-grid/editing/editing.md
@@ -362,17 +362,29 @@ Once a new value is entered into the input, it must be sent to the data grid.
 To do this, pass the row ID, the column field, and the new cell value to a call to `apiRef.current.setEditCellValue`.
 The new value will be parsed and validated, and the `value` prop will reflect the changes in the next render.
 
+It's important to also handle the [accessibility](/x/react-data-grid/accessibility/) of custom edit components.
+When a cell enters edit mode, an element must be focused to provide access via keyboard and for screen readers.
+Since multiple cells may be in edit mode at the same time, the `hasFocus` prop will be `true` on the cell that should have focus.
+Use this prop to focus the appropriate element.
+
 ```tsx
 function CustomEditComponent(props: GridRenderEditCellParams) {
-  const { id, value, field } = props;
+  const { id, value, field, hasFocus } = props;
   const apiRef = useGridApiContext();
+  const ref = React.useRef();
+
+  React.useLayoutEffect(() => {
+    if (hasFocus) {
+      ref.current.focus();
+    }
+  }, [hasFocus]);
 
   const handleValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = event.target.value; // The new value entered by the user
     apiRef.current.setEditCellValue({ id, field, value: newValue });
   };
 
-  return <input type="text" value={value} onChange={handleValueChange} />;
+  return <input ref={ref} type="text" value={value} onChange={handleValueChange} />;
 }
 ```