Prevent widget action when dragging in quick screens.

src/ui/widgets/DisplayReactGridLayout/displayGridLayout.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import React from "react";
 
 import { DisplayGridLayoutComponent } from "./displayGridLayout";
@@ -13,7 +13,16 @@ vi.mock("react-grid-layout", async () => {
 
   const useGridLayout = vi.fn(({ layout, cols }: any) => ({
     layout,
-    cols
+    cols,
+    isInteracting: true,
+    dragState: {
+      activeDrag: { i: "a", w: 0, h: 0 },
+      oldDragItem: null,
+      oldLayout: null
+    },
+    onDragStart: vi.fn(),
+    onDragStop: vi.fn(),
+    onResizeStop: vi.fn()
   }));
 
   return {
@@ -95,15 +104,23 @@ vi.mock("../register", () => ({
   registerWidget: vi.fn()
 }));
 
-const TestChild = ({ id }: { id: string }) => (
-  <div data-testid={`child-${id}`}>child {id}</div>
+const TestChild = ({
+  id,
+  onClick
+}: {
+  id: string;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}) => (
+  <div data-testid={`child-${id}`} onClick={onClick}>
+    child {id}
+  </div>
 );
 
-const renderGrid = (props: any = {}) =>
+const renderGrid = (props: any = {}, clickHandler?: any) =>
   render(
     <MacroContext.Provider value={{ macros: {}, updateMacro: vi.fn() }}>
       <DisplayGridLayoutComponent id="grid-test" {...props}>
-        <TestChild id="a" />
+        <TestChild id="a" onClick={clickHandler} />
         <TestChild id="b" />
       </DisplayGridLayoutComponent>
     </MacroContext.Provider>
@@ -305,4 +322,22 @@ describe("DisplayGridLayoutComponent", () => {
     expect(config?.margin).toEqual([10, 12]);
     expect(config?.rowHeight).toBe(25);
   });
+
+  it("does not click through to child when dragging", async () => {
+    const rgl = (await import("react-grid-layout")) as any;
+    const childClickHandler = vi.fn();
+    renderGrid({ gridLayout: [{ i: "a", w: 8, h: 4 }] }, childClickHandler);
+
+    const wrapper = screen.getByTestId("child-a").parentElement;
+    expect(wrapper).toBeInTheDocument();
+
+    const gridProps = rgl.__getLastGridProps();
+    gridProps.onDragStart([], { i: "a" }, { i: "a" }, null, null, wrapper);
+
+    const overlay = screen.getByTestId("drag-overlay");
+    expect(overlay).toBeInTheDocument();
+
+    fireEvent.click(overlay);
+    expect(childClickHandler).not.toHaveBeenCalled();
+  });
 });

src/ui/widgets/DisplayReactGridLayout/displayGridLayout.tsx

@@ -205,7 +205,14 @@ export const DisplayGridLayoutComponent = (
     gridCellResizeEnabled
   ]);
 
-  const { layout } = useGridLayout({
+  const {
+    layout,
+    isInteracting,
+    dragState,
+    onDragStart: hookOnDragStart,
+    onDragStop: hookOnDragStop,
+    onResizeStop: hookOnResizeStop
+  } = useGridLayout({
     layout: (props.gridLayout || []) as Layout,
     cols: columns
   });
@@ -219,16 +226,38 @@ export const DisplayGridLayoutComponent = (
           throw new Error("All grid items must have a stable id");
         }
 
+        const activeId = dragState?.activeDrag?.i;
+        const isActiveDragging = isInteracting && activeId === id;
+
         return (
           <div
             key={id}
             style={{ cursor: gridCellDragEnabled ? "grab" : "default" }}
           >
             {child}
+            {isActiveDragging && (
+              // overlay captures clicks during drag so child won't toggle
+              <div
+                data-testid="drag-overlay"
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  zIndex: 10,
+                  background: "transparent"
+                }}
+                onClick={e => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                }}
+              />
+            )}
           </div>
         );
       }),
-    [childrenArray, gridCellDragEnabled]
+    [childrenArray, gridCellDragEnabled, isInteracting, dragState]
   );
 
   return (
@@ -261,10 +290,16 @@ export const DisplayGridLayoutComponent = (
             ) => {
               if (element?.style && gridCellDragEnabled)
                 element.style.cursor = "grabbing";
+              if (newItem) {
+                hookOnDragStart(newItem.i, newItem.x, newItem.y);
+              }
             }}
             onDragStop={(layout, oldItem, newItem, placeholder, e, element) => {
               if (element?.style && gridCellDragEnabled)
                 element.style.cursor = "grab";
+              if (newItem) {
+                hookOnDragStop(newItem.i, newItem.x, newItem.y);
+              }
               dispatch(
                 displayInstanceUpdateGridLayout({
                   embeddedDisplayUuid: props.embeddedDisplayUuid,
@@ -273,7 +308,10 @@ export const DisplayGridLayoutComponent = (
                 })
               );
             }}
-            onResizeStop={layout => {
+            onResizeStop={(layout, oldItem, newItem) => {
+              if (newItem) {
+                hookOnResizeStop(newItem.i, newItem.w, newItem.h);
+              }
               dispatch(
                 displayInstanceUpdateGridLayout({
                   embeddedDisplayUuid: props.embeddedDisplayUuid,