diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx index 6fbf3c770a..37188fe89e 100644 --- a/src/HeaderCell.tsx +++ b/src/HeaderCell.tsx @@ -8,6 +8,7 @@ import { getCellStyle, getHeaderCellRowSpan, getHeaderCellStyle, + isInteractingWithInput, stopPropagation } from './utils'; import type { CalculatedColumn, SortColumn } from './types'; @@ -197,7 +198,11 @@ export default function HeaderCell({ selectCell({ idx: column.idx, rowIdx }); if (sortable) { - onSort(event.ctrlKey || event.metaKey); + // prevent sorting when interacting with input elements + const shouldAvoidSorting = isInteractingWithInput(event); + if (!shouldAvoidSorting) { + onSort(event.ctrlKey || event.metaKey); + } } } @@ -213,7 +218,13 @@ export default function HeaderCell({ if (event.key === ' ' || event.key === 'Enter') { // prevent scrolling event.preventDefault(); - onSort(event.ctrlKey || event.metaKey); + + // prevents sorting when interacting with input elements + const shouldAvoidSorting = isInteractingWithInput(event); + + if (!shouldAvoidSorting) { + onSort(event.ctrlKey || event.metaKey); + } } } diff --git a/src/utils/eventUtils.ts b/src/utils/eventUtils.ts index d8d47a4892..683d379281 100644 --- a/src/utils/eventUtils.ts +++ b/src/utils/eventUtils.ts @@ -18,3 +18,9 @@ export function createCellEvent>( return cellEvent; } + +export function isInteractingWithInput(event: React.KeyboardEvent | React.MouseEvent) { + return event.target instanceof HTMLInputElement || + event.target instanceof HTMLTextAreaElement || + event.target instanceof HTMLSelectElement; +}