Even better focus implementation

adazzle · Jul 14, 2020 · 6ffb06a · 6ffb06a
1 parent 421d265
commit 6ffb06a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 17 deletions.
diff --git a/src/Cell.tsx b/src/Cell.tsx
@@ -18,7 +18,6 @@ function Cell<R, SR>({
   eventBus,
   selectedCellProps,
   onRowClick,
-  onKeyDown,
   onClick,
   onDoubleClick,
   onContextMenu,
@@ -106,7 +105,6 @@ function Cell<R, SR>({
         width: column.width,
         left: column.left
       }}
-      onKeyDown={selectedCellProps?.onKeyDown ? wrapEvent(selectedCellProps.onKeyDown, onKeyDown) : onKeyDown}
       onClick={isEditing ? onClick : wrapEvent(handleClick, onClick)}
       onDoubleClick={isEditing ? onDoubleClick : wrapEvent(handleDoubleClick, onDoubleClick)}
       onContextMenu={isEditing ? onContextMenu : wrapEvent(handleContextMenu, onContextMenu)}

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
@@ -227,7 +227,7 @@ function DataGrid<R, K extends keyof R, SR>({
    * refs
    */
   const gridRef = useRef<HTMLDivElement>(null);
-  const rowsContainerRef = useRef<HTMLDivElement>(null);
+  const focusSinkRef = useRef<HTMLDivElement>(null);
   const prevSelectedPosition = useRef(selectedPosition);
   const latestDraggedOverRowIdx = useRef(draggedOverRowIdx);
   const lastSelectedRowIdx = useRef(-1);
@@ -300,9 +300,7 @@ function DataGrid<R, K extends keyof R, SR>({
     if (selectedPosition === prevSelectedPosition.current || selectedPosition.mode === 'EDIT' || !isCellWithinBounds(selectedPosition)) return;
     prevSelectedPosition.current = selectedPosition;
     scrollToCell(selectedPosition);
-    if (document.activeElement !== rowsContainerRef.current) {
-      rowsContainerRef.current!.focus({ preventScroll: true });
-    }
+    focusSinkRef.current!.focus();
   });
 
   useEffect(() => {
@@ -652,7 +650,6 @@ function DataGrid<R, K extends keyof R, SR>({
       return {
         mode: 'EDIT',
         idx: selectedPosition.idx,
-        onKeyDown: handleKeyDown,
         editorContainerProps: {
           editorPortalTarget,
           rowHeight,
@@ -756,17 +753,17 @@ function DataGrid<R, K extends keyof R, SR>({
       {rows.length === 0 && emptyRowsRenderer ? createElement(emptyRowsRenderer) : (
         <>
           <div
-            ref={rowsContainerRef}
+            ref={focusSinkRef}
             tabIndex={0}
-            style={{
-              height: Math.max(rows.length * rowHeight, clientHeight),
-              outline: 0,
-              position: 'relative',
-              top: -totalHeaderHeight // Prevents scrolling when grid receives focus via keyboard
-            }}
+            className="rdg-focus-sink"
             onKeyDown={handleKeyDown}
           />
-          {getViewportRows()}
+          <div
+            style={{ height: Math.max(rows.length * rowHeight, clientHeight) }}
+            onKeyDown={handleKeyDown}
+          >
+            {getViewportRows()}
+          </div>
           {summaryRows?.map((row, rowIdx) => (
             <SummaryRow<R, SR>
               key={rowIdx}

diff --git a/src/common/types.ts b/src/common/types.ts
@@ -107,7 +107,6 @@ export interface SharedEditorContainerProps {
 
 interface SelectedCellPropsBase {
   idx: number;
-  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
 }
 
 interface SelectedCellPropsEdit extends SelectedCellPropsBase {

diff --git a/style/core.less b/style/core.less
@@ -1,4 +1,4 @@
-@import './variables.less';
+@import "./variables.less";
 
 .rdg {
   // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
@@ -27,6 +27,15 @@
   }
 }
 
+.rdg-focus-sink {
+  position: sticky;
+  top: 0;
+  left: 0;
+  height: 0;
+  width: 0;
+  outline: 0;
+}
+
 .rdg-viewport-dragging .rdg-row {
   cursor: move;
 }