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 <[email protected]>
adazzle · Sep 13, 2023 · f864fbb · f864fbb
1 parent b44343a
commit f864fbb
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -68,23 +68,28 @@ 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
 });
 
 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] },
     { keys: '[/MouseLeft]' }
   ]);
   expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1');
   expect(getCellsAtRowIndex(2)[0]).toHaveTextContent('a3');
+  expect(cell).toHaveFocus();
 });
 
 test('should update multiple rows using mouse', async () => {