Grid: Fix resizing in Firefox (#454)

ClickHouse · Jul 29, 2024 · 7c852bb · 7c852bb
1 parent 10d8489
commit 7c852bb
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 12 deletions.
diff --git a/src/components/Grid/ColumnResizer.tsx b/src/components/Grid/ColumnResizer.tsx
@@ -1,9 +1,15 @@
-import { MouseEventHandler, PointerEventHandler, useCallback, useRef } from "react";
+import {
+  MouseEventHandler,
+  PointerEventHandler,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
 import styled from "styled-components";
 import { ColumnResizeFn, SetResizeCursorPositionFn } from "./types";
 import throttle from "lodash/throttle";
 
-const ResizeSpan = styled.div<{ $height: number }>`
+const ResizeSpan = styled.div<{ $height: number; $isPressed: boolean }>`
   top: 0;
   left: calc(100% - 4px);
   z-index: 1;
@@ -17,10 +23,12 @@ const ResizeSpan = styled.div<{ $height: number }>`
   &:hover {
     background: ${({ theme }) => theme.click.grid.header.cell.color.stroke.selectDirect};
   }
-  &:active {
-    height: 100%;
-    position: fixed;
-  }
+  ${({ $isPressed }) =>
+    $isPressed &&
+    `
+      height: 100%;
+      position: fixed;
+    `}
 `;
 type PointerRefType = {
   width: number;
@@ -42,17 +50,29 @@ const ColumnResizer = ({
 }: Props) => {
   const resizeRef = useRef<HTMLDivElement>(null);
   const pointerRef = useRef<PointerRefType | null>(null);
+  const [isPressed, setIsPressed] = useState<boolean>(false);
   const onColumnResize = throttle(onColumnResizeProp, 1000);
 
   const onMouseDown: MouseEventHandler<HTMLDivElement> = useCallback(
     e => {
       e.preventDefault();
       e.stopPropagation();
+      setIsPressed(true);
+
       if (e.detail > 1) {
         onColumnResize(columnIndex, 0, "auto");
       }
     },
-    [columnIndex, onColumnResize]
+    [columnIndex, onColumnResize, setIsPressed]
+  );
+
+  const onMouseUp: MouseEventHandler<HTMLDivElement> = useCallback(
+    e => {
+      e.stopPropagation();
+
+      setIsPressed(false);
+    },
+    [setIsPressed]
   );
   const onPointerDown: PointerEventHandler<HTMLDivElement> = useCallback(
     e => {
@@ -87,7 +107,8 @@ const ColumnResizer = ({
         if (header) {
           resizeRef.current.setPointerCapture(pointerRef.current.pointerId);
           const width =
-            header.scrollWidth + (e.clientX - pointerRef.current.initialClientX);
+            header.clientWidth + (e.clientX - pointerRef.current.initialClientX);
+
           setResizeCursorPosition(resizeRef.current, e.clientX, width, columnIndex);
           pointerRef.current.width = Math.max(width, 50);
         }
@@ -100,11 +121,17 @@ const ColumnResizer = ({
     <ResizeSpan
       ref={resizeRef}
       $height={height}
+      $isPressed={isPressed}
       onPointerDown={onPointerDown}
       onPointerUp={e => {
         e.preventDefault();
         e.stopPropagation();
-        if (resizeRef.current && pointerRef.current?.pointerId) {
+
+        if (
+          resizeRef.current &&
+          // 0 is a valid pointerId in Firefox
+          (pointerRef.current?.pointerId || pointerRef.current?.pointerId === 0)
+        ) {
           resizeRef.current.releasePointerCapture(pointerRef.current.pointerId);
           const shouldCallResize = e.clientX !== pointerRef.current.initialClientX;
           if (shouldCallResize) {
@@ -118,7 +145,7 @@ const ColumnResizer = ({
       onMouseMove={onMouseMove}
       onMouseDown={onMouseDown}
       onClick={e => e.stopPropagation()}
-      onMouseUp={e => e.stopPropagation()}
+      onMouseUp={onMouseUp}
       data-resize
     />
   );

diff --git a/src/components/Grid/Grid.test.tsx b/src/components/Grid/Grid.test.tsx
@@ -90,7 +90,7 @@ describe("Grid", () => {
     expect(lastHeaderCell).toBeNull();
   });
 
-  it("should render focussed element", () => {
+  it("should render focused element", () => {
     const { queryByTestId, getByText } = renderGrid({});
     const rowNumber = getByText("1");
     expect(rowNumber).not.toBeNull();

diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx
@@ -110,6 +110,7 @@ const OuterElementType = forwardRef<HTMLDivElement>((props, ref) => (
   <div
     ref={ref}
     data-testid="grid-outer-element"
+    tabIndex={0}
     {...props}
   />
 ));
@@ -780,7 +781,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
           width={width}
         />
       );
-    }
+    };
 
     return (
       <ContextMenu