fix: disable sorting of rows from header if interacting with input elements

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<R, SR>({
     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<R, SR>({
     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);
+      }
     }
   }
 

src/utils/eventUtils.ts

@@ -18,3 +18,9 @@ export function createCellEvent<E extends React.SyntheticEvent<HTMLDivElement>>(
 
   return cellEvent;
 }
+
+export function isInteractingWithInput(event: React.KeyboardEvent<HTMLSpanElement> | React.MouseEvent<HTMLSpanElement>) {
+  return event.target instanceof HTMLInputElement ||
+    event.target instanceof HTMLTextAreaElement ||
+    event.target instanceof HTMLSelectElement;
+}