diff --git a/src/components/data-grid/data-grid-cell-variants.tsx b/src/components/data-grid/data-grid-cell-variants.tsx index e0838e529..3a7ff8fba 100644 --- a/src/components/data-grid/data-grid-cell-variants.tsx +++ b/src/components/data-grid/data-grid-cell-variants.tsx @@ -63,6 +63,7 @@ export function ShortTextCell({ const [value, setValue] = React.useState(initialValue); const cellRef = React.useRef(null); const containerRef = React.useRef(null); + const prevIsEditingRef = React.useRef(isEditing); const prevInitialValueRef = React.useRef(initialValue); if (initialValue !== prevInitialValueRef.current) { @@ -148,7 +149,10 @@ export function ShortTextCell({ ); React.useEffect(() => { - if (isEditing && cellRef.current) { + const wasEditing = prevIsEditingRef.current; + prevIsEditingRef.current = isEditing; + + if (isEditing && !wasEditing && cellRef.current) { cellRef.current.focus(); if (!cellRef.current.textContent && value) { @@ -546,6 +550,7 @@ export function UrlCell({ const [value, setValue] = React.useState(initialValue ?? ""); const cellRef = React.useRef(null); const containerRef = React.useRef(null); + const prevIsEditingRef = React.useRef(isEditing); const prevInitialValueRef = React.useRef(initialValue); if (initialValue !== prevInitialValueRef.current) { @@ -668,7 +673,10 @@ export function UrlCell({ ); React.useEffect(() => { - if (isEditing && cellRef.current) { + const wasEditing = prevIsEditingRef.current; + prevIsEditingRef.current = isEditing; + + if (isEditing && !wasEditing && cellRef.current) { cellRef.current.focus(); if (!cellRef.current.textContent && value) {