diff --git a/src/components/ColumnFilterPopover.tsx b/src/components/ColumnFilterPopover.tsx index 1a4da2f..5350a54 100644 --- a/src/components/ColumnFilterPopover.tsx +++ b/src/components/ColumnFilterPopover.tsx @@ -44,6 +44,7 @@ export function ColumnFilterPopover({ const selectedValuesRef = React.useRef(selectedValues); const onSelectAllRef = React.useRef(onSelectAll); const filteredValuesRef = React.useRef(filteredValues); + const didDragRef = React.useRef(false); selectedValuesRef.current = selectedValues; onSelectAllRef.current = onSelectAll; @@ -53,6 +54,7 @@ export function ColumnFilterPopover({ isDraggingRef.current = true; dragStartRef.current = index; hoveredIndexRef.current = index; + didDragRef.current = false; setIsDragging(true); setDragStart(index); setHoveredIndex(index); @@ -70,14 +72,21 @@ export function ColumnFilterPopover({ if (isDraggingRef.current) { const start = dragStartRef.current; const end = hoveredIndexRef.current; - if (start !== null && end !== null) { + + // Only trigger special drag-select if it covered more than one item + if (start !== null && end !== null && start !== end) { const s = Math.min(start, end); const e = Math.max(start, end); - const itemsToSelect = filteredValuesRef.current.slice(s, e + 1).map(v => v); + const itemsToSelect = filteredValuesRef.current.slice(s, e + 1); const newSelected = new Set([...selectedValuesRef.current]); itemsToSelect.forEach(v => newSelected.add(v)); onSelectAllRef.current(Array.from(newSelected)); + + // Set flag to prevent subsequent click event from toggling the end item + didDragRef.current = true; + setTimeout(() => { didDragRef.current = false; }, 100); } + isDraggingRef.current = false; dragStartRef.current = null; hoveredIndexRef.current = null; @@ -136,7 +145,8 @@ export function ColumnFilterPopover({ onMouseDown={(e) => { e.preventDefault(); handleMouseDown(idx); }} onMouseEnter={() => handleMouseEnter(idx)} onClick={(e) => { - if (isDragging) return; + // If a drag operation just happened, ignore the click to avoid double-selection issues + if (didDragRef.current) return; if (e.shiftKey && lastClickedIndex !== null) { const start = Math.min(lastClickedIndex, idx);