From f864fbbae28e9340f6e829389bedbba090b5fcaf Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Wed, 13 Sep 2023 12:00:58 -0500
Subject: [PATCH] Keep the focus on the cell when drag handle is clicked
 (#3340)

* Add a failing test

* Fix test

* Add one more test

---------

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 src/DragHandle.tsx     | 2 ++
 test/dragFill.test.tsx | 9 +++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/DragHandle.tsx b/src/DragHandle.tsx
index 05d575bb4c..3497d95470 100644
--- a/src/DragHandle.tsx
+++ b/src/DragHandle.tsx
@@ -59,6 +59,8 @@ export default function DragHandle<R, SR>({
   const column = columns[idx];
 
   function handleMouseDown(event: React.MouseEvent<HTMLDivElement>) {
+    // keep the focus on the cell
+    event.preventDefault();
     if (event.buttons !== 1) return;
     setDragging(true);
     window.addEventListener('mouseover', onMouseOver);
diff --git a/test/dragFill.test.tsx b/test/dragFill.test.tsx
index f5264b5d48..0b785d3175 100644
--- a/test/dragFill.test.tsx
+++ b/test/dragFill.test.tsx
@@ -68,8 +68,11 @@ test('should not allow dragFill if onFill is undefined', async () => {
 
 test('should allow dragFill if onFill is specified', async () => {
   setup();
-  await userEvent.click(getCellsAtRowIndex(0)[0]);
+  const cell = getCellsAtRowIndex(0)[0];
+  await userEvent.click(cell);
+  expect(cell).toHaveFocus();
   await userEvent.dblClick(getDragHandle()!);
+  expect(cell).toHaveFocus();
   expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1');
   expect(getCellsAtRowIndex(2)[0]).toHaveTextContent('a1');
   expect(getCellsAtRowIndex(3)[0]).toHaveTextContent('a4'); // readonly cell
@@ -77,7 +80,8 @@ test('should allow dragFill if onFill is specified', async () => {
 
 test('should update single row using mouse', async () => {
   setup();
-  await userEvent.click(getCellsAtRowIndex(0)[0]);
+  const cell = getCellsAtRowIndex(0)[0];
+  await userEvent.click(cell);
   await userEvent.pointer([
     { keys: '[MouseLeft>]', target: getDragHandle()! },
     { target: getRows()[1] },
@@ -85,6 +89,7 @@ test('should update single row using mouse', async () => {
   ]);
   expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1');
   expect(getCellsAtRowIndex(2)[0]).toHaveTextContent('a3');
+  expect(cell).toHaveFocus();
 });
 
 test('should update multiple rows using mouse', async () => {