From 9275473ed1e2237775ce7a2246297fd5abe98e21 Mon Sep 17 00:00:00 2001
From: Daniel <daniel-blyth@live.com.au>
Date: Fri, 13 Mar 2026 21:57:03 +1100
Subject: [PATCH 1/2] fix: Context menu submenu offset incorrect for last item
 (#2635)

---
 src/components/ContextMenu/ContextMenu.react.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/ContextMenu/ContextMenu.react.js b/src/components/ContextMenu/ContextMenu.react.js
index 385bbdff2..fd2e520c9 100644
--- a/src/components/ContextMenu/ContextMenu.react.js
+++ b/src/components/ContextMenu/ContextMenu.react.js
@@ -7,7 +7,7 @@
  */
 
 import PropTypes from 'lib/PropTypes';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';
 import styles from 'components/ContextMenu/ContextMenu.scss';
 
 const getPositionToFitVisibleScreen = (ref, offset = 0) => {
@@ -65,7 +65,7 @@ const MenuSection = ({ level, items, path, setPath, hide, hoveredItemOffset }) =
   const basePosition = useRef(null);
   const initialParentScrollTop = useRef(0);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     // Use the actual pixel offset of the hovered item instead of index-based calculation
     const newPosition = getPositionToFitVisibleScreen(sectionRef, hoveredItemOffset);
     if (newPosition) {
@@ -110,7 +110,11 @@ const MenuSection = ({ level, items, path, setPath, hide, hoveredItemOffset }) =
       opacity: 1,
       position: 'absolute',
     }
-    : {};
+    : {
+      opacity: 0,
+      position: 'absolute',
+      pointerEvents: 'none',
+    };
 
   return (
     <ul ref={sectionRef} className={styles.category} style={style}>
@@ -119,8 +123,12 @@ const MenuSection = ({ level, items, path, setPath, hide, hoveredItemOffset }) =
           const newPath = path.slice(0, level + 1);
           newPath.push(index);
           // Get the actual pixel offset of the hovered item relative to its parent
+          // Using getBoundingClientRect for accuracy regardless of offsetParent chain
           const itemElement = event.currentTarget;
-          const itemOffset = itemElement.offsetTop;
+          const parentElement = itemElement.closest('ul');
+          const itemRect = itemElement.getBoundingClientRect();
+          const parentRect = parentElement.getBoundingClientRect();
+          const itemOffset = itemRect.top - parentRect.top + parentElement.scrollTop;
           setPath(newPath, itemOffset);
         };
 

From 610f7c09052a46b73faeb4ed784a8d266e43eaa8 Mon Sep 17 00:00:00 2001
From: Daniel <daniel-blyth@live.com.au>
Date: Fri, 13 Mar 2026 22:52:51 +1100
Subject: [PATCH 2/2] fix: add null guard for closest('ul') in ContextMenu
 hover handler

Prevent potential TypeError when parentElement is null by checking
the result of closest('ul') before calling getBoundingClientRect.
---
 src/components/ContextMenu/ContextMenu.react.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/ContextMenu/ContextMenu.react.js b/src/components/ContextMenu/ContextMenu.react.js
index fd2e520c9..98d44425a 100644
--- a/src/components/ContextMenu/ContextMenu.react.js
+++ b/src/components/ContextMenu/ContextMenu.react.js
@@ -126,6 +126,10 @@ const MenuSection = ({ level, items, path, setPath, hide, hoveredItemOffset }) =
           // Using getBoundingClientRect for accuracy regardless of offsetParent chain
           const itemElement = event.currentTarget;
           const parentElement = itemElement.closest('ul');
+          if (!parentElement) {
+            setPath(newPath, 0);
+            return;
+          }
           const itemRect = itemElement.getBoundingClientRect();
           const parentRect = parentElement.getBoundingClientRect();
           const itemOffset = itemRect.top - parentRect.top + parentElement.scrollTop;