Merge pull request #1 from aramvr/fix-grid-hover-from-external-elements

fix: grid is being hovered from an upper dialog
Workfront · Mar 27, 2023 · 0ac43a4 · 0ac43a4
2 parents c9e1f3d + 7cc985c
commit 0ac43a4
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/packages/core/src/data-grid/data-grid.tsx b/packages/core/src/data-grid/data-grid.tsx
@@ -1058,9 +1058,16 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
 
     const hoveredRef = React.useRef<GridMouseEventArgs>();
     const onMouseMoveImpl = React.useCallback(
-        (ev: MouseEvent) => {
+        (ev: MouseEvent) => {        
+
             const canvas = ref.current;
-            if (canvas === null) return;
+            const eventTarget = eventTargetRef?.current;
+
+
+
+            if (canvas === null || (ev.target !== canvas && ev.target !== eventTarget)) {
+                return;
+            }
 
             const args = getMouseArgsForPosition(canvas, ev.clientX, ev.clientY, ev);
             if (!isSameItem(args, hoveredRef.current)) {

diff --git a/packages/core/test/data-grid.test.tsx b/packages/core/test/data-grid.test.tsx
@@ -243,6 +243,30 @@ describe("data-grid", () => {
         );
     });
 
+    test("Cell is not hovered when target is not data grid", () => {
+        const spy = jest.fn();
+
+        render(
+            <>
+        <DataGrid {...basicProps} onItemHovered={spy} />
+        <div data-testid="outside-element" style={{
+            position: 'absolute',
+            width: '100vh',
+            height: '100vh',
+        }} />
+        </>
+        );
+
+
+        const outsideElement = screen.getByTestId('outside-element');
+        fireEvent.mouseMove(outsideElement, {
+            clientX: 350, // Col C
+            clientY: 36 + 32 * 5 + 16, // Row 5 (0 indexed)
+        });
+
+        expect(spy).not.toHaveBeenCalled()
+    });
+
     test("Header hovered", () => {
         const spy = jest.fn();