From dc63ed8dee4d2515b9cfbf32735c1d497b87b050 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Tue, 16 Jun 2026 00:30:54 +0100
Subject: [PATCH] fix(base): select grid cell on mousedown to avoid stale focus
 ring flash

The focus ring is gated on the grid having DOM focus (.bodyGrid:focus .cellFocused), but the focusedCell atom is never cleared when the grid blurs. Clicking outside hides the ring via the :focus gate while the atom still points at the old cell.

Selection was committed on click (mouseup), while the grid receives focus on mousedown. Clicking a new cell re-focused the grid before the atom updated, briefly painting the ring on the previously selected cell. Commit selection on mousedown so the atom updates in the same event that grants focus, before the browser paints.
---
 apps/client/src/ee/base/components/grid/grid-cell.tsx    | 9 +++++++++
 .../src/ee/base/components/grid/row-number-cell.tsx      | 9 +++++++++
 2 files changed, 18 insertions(+)

diff --git a/apps/client/src/ee/base/components/grid/grid-cell.tsx b/apps/client/src/ee/base/components/grid/grid-cell.tsx
index 07a3d754d..6ba599e17 100644
--- a/apps/client/src/ee/base/components/grid/grid-cell.tsx
+++ b/apps/client/src/ee/base/components/grid/grid-cell.tsx
@@ -91,6 +91,14 @@ export const GridCell = memo(function GridCell({
     setEditingCell({ rowId, propertyId: property.id });
   }, [property, isRowNumber, rowId, readOnly, setEditingCell, setActiveFormulaEditor]);
 
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!property || e.button !== 0) return;
+      setFocusedCell({ rowId, propertyId: property.id });
+    },
+    [property, rowId, setFocusedCell],
+  );
+
   const handleClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
       if (!property) return;
@@ -190,6 +198,7 @@ export const GridCell = memo(function GridCell({
           : undefined
       }
       onClick={handleClick}
+      onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}
     >
       <CellComponent
diff --git a/apps/client/src/ee/base/components/grid/row-number-cell.tsx b/apps/client/src/ee/base/components/grid/row-number-cell.tsx
index 1b9c7bf87..00c419485 100644
--- a/apps/client/src/ee/base/components/grid/row-number-cell.tsx
+++ b/apps/client/src/ee/base/components/grid/row-number-cell.tsx
@@ -44,6 +44,14 @@ export const RowNumberCell = memo(function RowNumberCell({
     ),
   );
 
+  const handleCellMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.button !== 0) return;
+      setFocusedCell({ rowId, propertyId: "__row_number" });
+    },
+    [rowId, setFocusedCell],
+  );
+
   const handleCellClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
       setFocusedCell({ rowId, propertyId: "__row_number" });
@@ -77,6 +85,7 @@ export const RowNumberCell = memo(function RowNumberCell({
           : undefined
       }
       onClick={handleCellClick}
+      onMouseDown={handleCellMouseDown}
     >
       <div className={classes.rowNumberCellInner}>
         {editable && (