Skip to content

Commit 8252731

Browse files
fix(data-grid): improve editing focus handling in ShortTextCell and UrlCell (#1112)
- Introduced a ref to track previous editing state to ensure focus is only applied when entering edit mode. - Updated React useEffect logic to prevent unnecessary focus calls when already in editing mode.
1 parent 5bd32f4 commit 8252731

1 file changed

Lines changed: 10 additions & 2 deletions

File tree

src/components/data-grid/data-grid-cell-variants.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export function ShortTextCell<TData>({
6363
const [value, setValue] = React.useState(initialValue);
6464
const cellRef = React.useRef<HTMLDivElement>(null);
6565
const containerRef = React.useRef<HTMLDivElement>(null);
66+
const prevIsEditingRef = React.useRef(isEditing);
6667

6768
const prevInitialValueRef = React.useRef(initialValue);
6869
if (initialValue !== prevInitialValueRef.current) {
@@ -148,7 +149,10 @@ export function ShortTextCell<TData>({
148149
);
149150

150151
React.useEffect(() => {
151-
if (isEditing && cellRef.current) {
152+
const wasEditing = prevIsEditingRef.current;
153+
prevIsEditingRef.current = isEditing;
154+
155+
if (isEditing && !wasEditing && cellRef.current) {
152156
cellRef.current.focus();
153157

154158
if (!cellRef.current.textContent && value) {
@@ -546,6 +550,7 @@ export function UrlCell<TData>({
546550
const [value, setValue] = React.useState(initialValue ?? "");
547551
const cellRef = React.useRef<HTMLDivElement>(null);
548552
const containerRef = React.useRef<HTMLDivElement>(null);
553+
const prevIsEditingRef = React.useRef(isEditing);
549554

550555
const prevInitialValueRef = React.useRef(initialValue);
551556
if (initialValue !== prevInitialValueRef.current) {
@@ -668,7 +673,10 @@ export function UrlCell<TData>({
668673
);
669674

670675
React.useEffect(() => {
671-
if (isEditing && cellRef.current) {
676+
const wasEditing = prevIsEditingRef.current;
677+
prevIsEditingRef.current = isEditing;
678+
679+
if (isEditing && !wasEditing && cellRef.current) {
672680
cellRef.current.focus();
673681

674682
if (!cellRef.current.textContent && value) {

0 commit comments

Comments
 (0)