Merge pull request #379 from Renumics/fix/broken-keyboard-scroll-in-d…

…atagrid Fix/broken keyboard scroll in datagrid
Renumics · Nov 21, 2023 · ab6c0d9 · ab6c0d9
2 parents f753c7b + 722f68d
commit ab6c0d9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/src/systems/dnd/Draggable.tsx b/src/systems/dnd/Draggable.tsx
@@ -13,8 +13,14 @@ export default function Draggable({ data, children }: Props) {
         id,
         data,
     });
+
+    // remove tabIndex from attributes
+    // as it prevents the keyboard controls of our table from working correctly
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { tabIndex, ...neededAttributes } = attributes;
+
     return (
-        <div ref={setNodeRef} {...listeners} {...attributes}>
+        <div ref={setNodeRef} {...listeners} {...neededAttributes}>
             {children}
         </div>
     );

diff --git a/src/widgets/DataGrid/KeyboardControls.tsx b/src/widgets/DataGrid/KeyboardControls.tsx
@@ -1,4 +1,4 @@
-import { KeyboardEvent, PropsWithChildren, useCallback } from 'react';
+import { KeyboardEvent, PropsWithChildren, useCallback, useRef } from 'react';
 import { Dataset, useDataset } from '../../stores/dataset';
 import 'twin.macro';
 import useSort from './hooks/useSort';
@@ -16,6 +16,8 @@ const KeyboardControls = ({
     const selectRows = useDataset(selectRowsSelector);
     const { getSortedIndex, getOriginalIndex } = useSort();
 
+    const containerRef = useRef<HTMLDivElement>(null);
+
     const handleKeyDown = useCallback(
         (e: KeyboardEvent<HTMLDivElement>) => {
             const selectedIndices = useDataset.getState().selectedIndices;
@@ -26,6 +28,11 @@ const KeyboardControls = ({
 
             if (step === 0) return;
 
+            e.preventDefault();
+            if (e.target != containerRef.current) {
+                containerRef.current?.focus();
+            }
+
             const sortedIndex = getSortedIndex(lastSelectedIndex);
             const nextSortedIndex = sortedIndex + step;
             const nextSelectedIndex = getOriginalIndex(nextSortedIndex);
@@ -39,8 +46,13 @@ const KeyboardControls = ({
     );
 
     return (
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-tabindex
-        <div tw="outline-none" tabIndex={0} onKeyDown={handleKeyDown}>
+        /* eslint-disable jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-tabindex */
+        <div
+            tw="outline-none"
+            tabIndex={0}
+            ref={containerRef}
+            onKeyDown={handleKeyDown}
+        >
             {children}
         </div>
     );