From d60b8f7d9329dba17acb21dd8e446619a5c9a4eb Mon Sep 17 00:00:00 2001
From: Dominik Haentsch <dominik.haentsch@gmail.com>
Date: Tue, 21 Nov 2023 13:35:01 +0100
Subject: [PATCH 1/2] fix: move focus from inner elements to table wrapper when
 necessary

---
 src/systems/dnd/Draggable.tsx             |  2 +-
 src/widgets/DataGrid/KeyboardControls.tsx | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/systems/dnd/Draggable.tsx b/src/systems/dnd/Draggable.tsx
index c9aedeb7..4d107705 100644
--- a/src/systems/dnd/Draggable.tsx
+++ b/src/systems/dnd/Draggable.tsx
@@ -14,7 +14,7 @@ export default function Draggable({ data, children }: Props) {
         data,
     });
     return (
-        <div ref={setNodeRef} {...listeners} {...attributes}>
+        <div ref={setNodeRef} {...listeners} {...attributes} tabIndex={-1}>
             {children}
         </div>
     );
diff --git a/src/widgets/DataGrid/KeyboardControls.tsx b/src/widgets/DataGrid/KeyboardControls.tsx
index f5090c83..2d05d887 100644
--- 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);
@@ -40,7 +47,12 @@ 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}>
+        <div
+            tw="outline-none"
+            ref={containerRef}
+            tabIndex={0}
+            onKeyDown={handleKeyDown}
+        >
             {children}
         </div>
     );

From 722f68db2c1950bffbef30768211327c16443d05 Mon Sep 17 00:00:00 2001
From: Dominik Haentsch <dominik.haentsch@gmail.com>
Date: Tue, 21 Nov 2023 13:45:29 +0100
Subject: [PATCH 2/2] chore: fix linter warnings

---
 src/systems/dnd/Draggable.tsx             | 8 +++++++-
 src/widgets/DataGrid/KeyboardControls.tsx | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/systems/dnd/Draggable.tsx b/src/systems/dnd/Draggable.tsx
index 4d107705..6e00bebb 100644
--- 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} tabIndex={-1}>
+        <div ref={setNodeRef} {...listeners} {...neededAttributes}>
             {children}
         </div>
     );
diff --git a/src/widgets/DataGrid/KeyboardControls.tsx b/src/widgets/DataGrid/KeyboardControls.tsx
index 2d05d887..ad7655b7 100644
--- a/src/widgets/DataGrid/KeyboardControls.tsx
+++ b/src/widgets/DataGrid/KeyboardControls.tsx
@@ -46,11 +46,11 @@ const KeyboardControls = ({
     );
 
     return (
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-tabindex
+        /* eslint-disable jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-tabindex */
         <div
             tw="outline-none"
-            ref={containerRef}
             tabIndex={0}
+            ref={containerRef}
             onKeyDown={handleKeyDown}
         >
             {children}