From 2df810c59b1520096d33a3db70d36ba67e120b84 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 20 Jun 2023 09:34:27 +0100
Subject: [PATCH] Update grid context menu position determination to work
 regardless of page scroll offsets

---
 .../src/components/grid/cells/GridCell.svelte |  5 ++++
 .../src/components/grid/stores/menu.js        | 25 ++++++++++++-------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
index fe4bd70ba4..ac2a4da5a0 100644
--- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
@@ -82,6 +82,11 @@
     align-items: center;
   }
 
+  /* Disable pointer events for non-focused cells */
+  .cell:not(.focused) :global(*) {
+    pointer-events: none;
+  }
+
   /* Cell border */
   .cell.focused:after,
   .cell.error:after,
diff --git a/packages/frontend-core/src/components/grid/stores/menu.js b/packages/frontend-core/src/components/grid/stores/menu.js
index 3f34c0a266..db56f57ce9 100644
--- a/packages/frontend-core/src/components/grid/stores/menu.js
+++ b/packages/frontend-core/src/components/grid/stores/menu.js
@@ -1,5 +1,5 @@
-import { writable, get } from "svelte/store"
-import { GutterWidth } from "../lib/constants"
+import { writable } from "svelte/store"
+import { tick } from "svelte"
 
 export const createStores = () => {
   const menu = writable({
@@ -14,18 +14,25 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { menu, bounds, focusedCellId, stickyColumn, rowHeight } = context
+  const { menu, focusedCellId, rand } = context
 
   const open = (cellId, e) => {
-    const $bounds = get(bounds)
-    const $stickyColumn = get(stickyColumn)
-    const $rowHeight = get(rowHeight)
     e.preventDefault()
+
+    // Get DOM node for grid data wrapper to compute relative position to
+    const gridNode = document.getElementById(`grid-${rand}`)
+    const dataNode = gridNode?.getElementsByClassName("grid-data-outer")?.[0]
+    if (!dataNode) {
+      return
+    }
+
+    // Compute bounds of cell relative to outer data node
+    const targetBounds = e.target.getBoundingClientRect()
+    const dataBounds = dataNode.getBoundingClientRect()
     focusedCellId.set(cellId)
     menu.set({
-      left:
-        e.clientX - $bounds.left + GutterWidth + ($stickyColumn?.width || 0),
-      top: e.clientY - $bounds.top + $rowHeight,
+      left: targetBounds.left - dataBounds.left + e.offsetX,
+      top: targetBounds.top - dataBounds.top + e.offsetY,
       visible: true,
     })
   }