fix(flat-table): ensure window does not scroll when using up and down…

… arrow keys to navigate rows Ensure the default browser behaviour is prevented when using up and down arrow keys to navigate clickable/ expandable rows fix #6152
Sage · Jun 29, 2023 · ea89c65 · ea89c65
1 parent a742bd4
commit ea89c65
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/flat-table/flat-table.component.js b/src/components/flat-table/flat-table.component.js
@@ -139,6 +139,7 @@ const FlatTable = ({
     );
 
     if (Events.isDownKey(ev)) {
+      ev.preventDefault();
       if (
         currentFocusIndex !== -1 &&
         currentFocusIndex < focusableElementsArray.length
@@ -153,6 +154,7 @@ const FlatTable = ({
         }
       }
     } else if (Events.isUpKey(ev)) {
+      ev.preventDefault();
       if (currentFocusIndex > 0) {
         focusableElementsArray[currentFocusIndex - 1]?.focus();
       } else {

diff --git a/src/components/flat-table/flat-table.spec.js b/src/components/flat-table/flat-table.spec.js
@@ -807,8 +807,9 @@ describe("FlatTable", () => {
   });
 
   describe("keyboard navigation", () => {
-    const arrowDown = { key: "ArrowDown" };
-    const arrowUp = { key: "ArrowUp" };
+    const preventDefault = jest.fn();
+    const arrowDown = { key: "ArrowDown", preventDefault };
+    const arrowUp = { key: "ArrowUp", preventDefault };
     const arrowLeft = { key: "ArrowLeft" };
 
     describe("when rows are clickable", () => {