From 2cc771315d670e7faca72f9e48272c6f51c100cc Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Tue, 23 Apr 2024 15:14:33 +0200
Subject: [PATCH] Add keyboard support to select table row

---
 .../Tabs/DocumentsTabV2/DocumentsTableComponent.tsx        | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
index 3234882a1..e6d8490e8 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -22,7 +22,7 @@ import {
   useTableFeatures,
   useTableSelection,
 } from "@fluentui/react-components";
-import React, { useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { FixedSizeList as List, ListChildComponentProps } from "react-window";
 
 export type DocumentsTableComponentItem = {
@@ -121,6 +121,8 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     [columnHeaders],
   );
 
+  const onIdClicked = useCallback((index: number) => onSelectedRowsChange(new Set([index])), [onSelectedRowsChange]);
+
   const RenderRow = ({ index, style, data }: ReactWindowRenderFnProps) => {
     const { item, selected, appearance, onClick, onKeyDown } = data[index];
     return (
@@ -135,8 +137,9 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
           <TableCell
             key={column.columnId}
             onClick={(/* e */) => onSelectedRowsChange(new Set<TableRowId>([index]))}
-            onKeyDown={onKeyDown}
+            onKeyDown={() => onIdClicked(index)}
             {...columnSizing.getTableCellProps(column.columnId)}
+            tabIndex={column.columnId === "id" ? 0 : -1}
           >
             {column.renderCell(item)}
           </TableCell>