diff --git a/src/Cell.tsx b/src/Cell.tsx index 4d8d52fe5a..6b199cab2b 100644 --- a/src/Cell.tsx +++ b/src/Cell.tsx @@ -18,7 +18,6 @@ function Cell({ eventBus, selectedCellProps, onRowClick, - onKeyDown, onClick, onDoubleClick, onContextMenu, @@ -106,7 +105,6 @@ function Cell({ 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 index cfa7676b49..5cc5cd2efd 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -227,7 +227,7 @@ function DataGrid({ * refs */ const gridRef = useRef(null); - const rowsContainerRef = useRef(null); + const focusSinkRef = useRef(null); const prevSelectedPosition = useRef(selectedPosition); const latestDraggedOverRowIdx = useRef(draggedOverRowIdx); const lastSelectedRowIdx = useRef(-1); @@ -300,9 +300,7 @@ function DataGrid({ 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({ return { mode: 'EDIT', idx: selectedPosition.idx, - onKeyDown: handleKeyDown, editorContainerProps: { editorPortalTarget, rowHeight, @@ -756,17 +753,17 @@ function DataGrid({ {rows.length === 0 && emptyRowsRenderer ? createElement(emptyRowsRenderer) : ( <>
- {getViewportRows()} +
+ {getViewportRows()} +
{summaryRows?.map((row, rowIdx) => ( key={rowIdx} diff --git a/src/common/types.ts b/src/common/types.ts index e8c1dbf23c..338d3c97df 100644 --- 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) => void; } interface SelectedCellPropsEdit extends SelectedCellPropsBase { diff --git a/style/core.less b/style/core.less index 4cf631d332..aefbea42bb 100644 --- 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; }