From 6804df04239b30ed249ce29daa5449423c5152df Mon Sep 17 00:00:00 2001 From: Ronnel Davis Date: Sun, 28 Jul 2024 16:38:03 +0530 Subject: [PATCH 1/4] Added disableKeyboardEvents as a prop in DataGrid.tsx --- src/DataGrid.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index 5fd10c4e83..b297b53aa2 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -160,6 +160,8 @@ export interface DataGridProps extends Sha /** * Event props */ + /** Disables all keyboard events like using space or enter to sort the columns */ + disableKeyboardEvents?: Maybe, NoInfer>, event: CellMouseEvent) => void @@ -248,6 +250,7 @@ function DataGrid( className, style, rowClass, + disableKeyboardEvents, direction: rawDirection, // ARIA role: rawRole, @@ -1114,6 +1117,7 @@ function DataGrid( selectedCellIdx={ selectedPosition.rowIdx === mainHeaderRowIdx ? selectedPosition.idx : undefined } + disableKeyboardEvents={disableKeyboardEvents} selectCell={selectHeaderCellLatest} shouldFocusGrid={!selectedCellIsWithinSelectionBounds} direction={direction} From d03be784ad6e544d8deeaa0f0b0774ba7d4081dd Mon Sep 17 00:00:00 2001 From: Ronnel Davis Date: Sun, 28 Jul 2024 16:39:54 +0530 Subject: [PATCH 2/4] Added disableKeyboardEvents to HeaderRow.tsx --- src/HeaderRow.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx index 7b4c7cb755..029bec9d92 100644 --- a/src/HeaderRow.tsx +++ b/src/HeaderRow.tsx @@ -23,6 +23,7 @@ export interface HeaderRowProps extends SharedDataGr selectedCellIdx: number | undefined; shouldFocusGrid: boolean; direction: Direction; + disableKeyboardEvents: boolean; } const headerRow = css` @@ -56,7 +57,8 @@ function HeaderRow({ selectedCellIdx, selectCell, shouldFocusGrid, - direction + direction, + disableKeyboardEvents }: HeaderRowProps) { const dragDropKey = useId(); @@ -83,6 +85,7 @@ function HeaderRow({ shouldFocusGrid={shouldFocusGrid && index === 0} direction={direction} dragDropKey={dragDropKey} + disableKeyboardEvents={disableKeyboardEvents} /> ); } From 03813caae7ee4efa75e471082bd63d93f912f426 Mon Sep 17 00:00:00 2001 From: Ronnel Davis Date: Sun, 28 Jul 2024 16:41:08 +0530 Subject: [PATCH 3/4] Added disableKeyboardEvents to HeaderCell.tsx --- src/HeaderCell.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx index 2dde6d2fe0..08d4648cbd 100644 --- a/src/HeaderCell.tsx +++ b/src/HeaderCell.tsx @@ -70,6 +70,7 @@ export interface HeaderCellProps extends SharedHeaderRowProps { rowIdx: number; isCellSelected: boolean; dragDropKey: string; + disableKeyboardEvents: boolean; } export default function HeaderCell({ @@ -84,7 +85,8 @@ export default function HeaderCell({ selectCell, shouldFocusGrid, direction, - dragDropKey + dragDropKey, + disableKeyboardEvents }: HeaderCellProps) { const [isDragging, setIsDragging] = useState(false); const [isOver, setIsOver] = useState(false); @@ -199,6 +201,8 @@ export default function HeaderCell({ } function onKeyDown(event: React.KeyboardEvent) { + if(disableKeyboardEvents) return; + if (event.key === ' ' || event.key === 'Enter') { // prevent scrolling event.preventDefault(); From f0411085e68a2f1bf9af6ede8dbf19a3ef6105e0 Mon Sep 17 00:00:00 2001 From: Ronnel Davis Date: Sun, 28 Jul 2024 16:42:18 +0530 Subject: [PATCH 4/4] Update README.md --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index e131eac6cf..d56243a30b 100644 --- a/README.md +++ b/README.md @@ -200,6 +200,12 @@ A number defining the height of summary rows. ###### `onSelectedCellChange?: Maybe<(args: CellSelectArgs) => void>;` +###### `disableKeyboardEvents?: Maybe` + +**Default:** `false` + +Disables keyboard interaction for the header cells + Triggered when the selected cell is changed. Arguments: