From a120b880d78e40893f3f515d500fc7fb2af94520 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Wed, 19 Mar 2025 12:13:20 +0000 Subject: [PATCH 1/4] Fix double-click to auto-size columns --- src/HeaderCell.tsx | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx index 80ffd41fbf..f9d4dc5760 100644 --- a/src/HeaderCell.tsx +++ b/src/HeaderCell.tsx @@ -119,7 +119,6 @@ export default function HeaderCell({ const headerCell = currentTarget.parentElement!; const { right, left } = headerCell.getBoundingClientRect(); const offset = isRtl ? event.clientX - left : right - event.clientX; - let hasDoubleClicked = false; function onPointerMove(event: PointerEvent) { const { width, right, left } = headerCell.getBoundingClientRect(); @@ -130,29 +129,23 @@ export default function HeaderCell({ } } - function onDoubleClick() { - hasDoubleClicked = true; - onColumnResize(column, 'max-content'); - } - function onLostPointerCapture(event: PointerEvent) { // Handle final pointer position that may have been skipped by coalesced pointer move events. - // Skip move pointer handling if the user double-clicked. - if (!hasDoubleClicked) { - onPointerMove(event); - } + onPointerMove(event); currentTarget.removeEventListener('pointermove', onPointerMove); - currentTarget.removeEventListener('dblclick', onDoubleClick); currentTarget.removeEventListener('lostpointercapture', onLostPointerCapture); } currentTarget.setPointerCapture(pointerId); currentTarget.addEventListener('pointermove', onPointerMove); - currentTarget.addEventListener('dblclick', onDoubleClick); currentTarget.addEventListener('lostpointercapture', onLostPointerCapture); } + function onDoubleClick() { + onColumnResize(column, 'max-content'); + } + function onSort(ctrlClick: boolean) { if (onSortColumnsChange == null) return; const { sortDescendingFirst } = column; @@ -304,6 +297,7 @@ export default function HeaderCell({ className={resizeHandleClassname} onClick={stopPropagation} onPointerDown={onPointerDown} + onDoubleClick={onDoubleClick} /> )} From cea7195195a7cc89763c3883651ee0fb2e689767 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Wed, 19 Mar 2025 12:42:22 +0000 Subject: [PATCH 2/4] fix tests --- src/HeaderCell.tsx | 9 +++++++-- test/browser/column/resizable.test.tsx | 6 +++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx index f9d4dc5760..2cd1d88cba 100644 --- a/src/HeaderCell.tsx +++ b/src/HeaderCell.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useRef, useState } from 'react'; import { css } from '@linaria/core'; import { useRovingTabIndex } from './hooks'; @@ -85,6 +85,7 @@ export default function HeaderCell({ direction, dragDropKey }: HeaderCellProps) { + const hasDoubleClickedRef = useRef(false); const [isDragging, setIsDragging] = useState(false); const [isOver, setIsOver] = useState(false); const isRtl = direction === 'rtl'; @@ -119,6 +120,7 @@ export default function HeaderCell({ const headerCell = currentTarget.parentElement!; const { right, left } = headerCell.getBoundingClientRect(); const offset = isRtl ? event.clientX - left : right - event.clientX; + hasDoubleClickedRef.current = false; function onPointerMove(event: PointerEvent) { const { width, right, left } = headerCell.getBoundingClientRect(); @@ -131,7 +133,9 @@ export default function HeaderCell({ function onLostPointerCapture(event: PointerEvent) { // Handle final pointer position that may have been skipped by coalesced pointer move events. - onPointerMove(event); + if (!hasDoubleClickedRef.current) { + onPointerMove(event); + } currentTarget.removeEventListener('pointermove', onPointerMove); currentTarget.removeEventListener('lostpointercapture', onLostPointerCapture); @@ -143,6 +147,7 @@ export default function HeaderCell({ } function onDoubleClick() { + hasDoubleClickedRef.current = true; onColumnResize(column, 'max-content'); } diff --git a/test/browser/column/resizable.test.tsx b/test/browser/column/resizable.test.tsx index a96c03f601..8d3eea9422 100644 --- a/test/browser/column/resizable.test.tsx +++ b/test/browser/column/resizable.test.tsx @@ -1,4 +1,4 @@ -import { commands, userEvent } from '@vitest/browser/context'; +import { commands, page } from '@vitest/browser/context'; import type { Column } from '../../../src'; import { resizeHandleClassname } from '../../../src/HeaderCell'; @@ -36,9 +36,9 @@ async function resize({ column, resizeBy }: ResizeArgs) { } async function autoResize(column: Element) { - const resizeHandle = getResizeHandle(column); + const resizeHandle = page.elementLocator(getResizeHandle(column)); - await userEvent.dblClick(resizeHandle); + await resizeHandle.dblClick(); } const columns: readonly Column[] = [ From 076fc2c8b802174f4463a3d2b3d3d0fdbacd9a0e Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Wed, 19 Mar 2025 12:46:48 +0000 Subject: [PATCH 3/4] fix types --- tsconfig.website.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tsconfig.website.json b/tsconfig.website.json index 8094a617b1..8c78a220cf 100644 --- a/tsconfig.website.json +++ b/tsconfig.website.json @@ -1,7 +1,8 @@ { "extends": "./tsconfig.base.json", "compilerOptions": { - "lib": ["ESNext", "DOM", "DOM.Iterable", "DOM.AsyncIterable"] + "lib": ["ESNext", "DOM", "DOM.Iterable", "DOM.AsyncIterable"], + "skipLibCheck": true }, "include": ["website/**/*"], "references": [{ "path": "tsconfig.src.json" }] From 14c8119dc51fe2d519804a64b4f211fcd480de6a Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Wed, 19 Mar 2025 12:50:27 +0000 Subject: [PATCH 4/4] add back comment --- src/HeaderCell.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx index 2cd1d88cba..eeb00441b4 100644 --- a/src/HeaderCell.tsx +++ b/src/HeaderCell.tsx @@ -133,6 +133,7 @@ export default function HeaderCell({ function onLostPointerCapture(event: PointerEvent) { // Handle final pointer position that may have been skipped by coalesced pointer move events. + // Skip move pointer handling if the user double-clicked. if (!hasDoubleClickedRef.current) { onPointerMove(event); }