Prevent text selection when resizing or dragging

Author: matt-aitken

apps/webapp/app/components/metrics/QueryWidget.tsx

@@ -18,7 +18,6 @@ import {
 import { LoadingBarDivider } from "../primitives/LoadingBarDivider";
 import { Callout } from "../primitives/Callout";
 import { ChartBarIcon } from "@heroicons/react/24/solid";
-import { cn } from "~/utils/cn";
 import {
   Popover,
   PopoverContent,
@@ -171,7 +170,7 @@ export function QueryWidget({
 
   return (
     <div className="h-full">
-      <Card className={cn("h-full overflow-hidden px-0 pb-0", isResizing && "select-none")}>
+      <Card className="h-full overflow-hidden px-0 pb-0">
         <Card.Header draggable={isDraggable}>
           <div className="flex items-center gap-1.5">{title}</div>
           <Card.Accessory>

apps/webapp/app/components/metrics/TitleWidget.tsx

@@ -42,8 +42,7 @@ export function TitleWidget({
       <div
         className={cn(
           "group flex h-full items-center gap-2 rounded-lg border border-grid-bright bg-background-bright px-4",
-          isDraggable && "drag-handle cursor-grab active:cursor-grabbing",
-          isResizing && "select-none"
+          isDraggable && "drag-handle cursor-grab active:cursor-grabbing"
         )}
       >
         <span className="min-w-0 flex-1 truncate text-lg font-medium text-text-bright">

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.$dashboardKey/route.tsx

@@ -16,6 +16,7 @@ import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { z } from "zod";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "~/utils/cn";
 import ReactGridLayout from "react-grid-layout";
 import { MetricWidget } from "../resources.metric";
 import { TitleWidget } from "~/components/metrics/TitleWidget";
@@ -131,6 +132,8 @@ export function MetricDashboard({
   const { value, values } = useSearchParams();
   const { width, containerRef, mounted } = useContainerWidth();
   const [resizingItemId, setResizingItemId] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const isInteracting = resizingItemId !== null || isDragging;
 
   const organization = useOrganization();
   const project = useProject();
@@ -183,7 +186,10 @@ export function MetricDashboard({
       </div>
       <div
         ref={containerRef}
-        className="overflow-y-auto scrollbar-thin scrollbar-track-charcoal-800 scrollbar-thumb-charcoal-700"
+        className={cn(
+          "overflow-y-auto scrollbar-thin scrollbar-track-charcoal-800 scrollbar-thumb-charcoal-700",
+          isInteracting && "select-none"
+        )}
       >
         {mounted && (
           <ReactGridLayout
@@ -198,6 +204,8 @@ export function MetricDashboard({
             onLayoutChange={handleLayoutChange}
             onResizeStart={(_layout, oldItem) => setResizingItemId(oldItem?.i ?? null)}
             onResizeStop={() => setResizingItemId(null)}
+            onDragStart={() => setIsDragging(true)}
+            onDragStop={() => setIsDragging(false)}
           >
             {Object.entries(widgets).map(([key, widget]) => (
               <div key={key}>