Fixed menu position being broken when there are too many options. (#434)

future-architect · Oct 23, 2024 · 7cbfa36 · 7cbfa36
1 parent 06e7ff0
commit 7cbfa36
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/packages/cheetah-grid/src/js/columns/action/internal/InlineMenuElement.ts b/packages/cheetah-grid/src/js/columns/action/internal/InlineMenuElement.ts
@@ -127,13 +127,9 @@ function openMenu<T>(
 
   // Make the selection item at the middle
   let offset = 0;
-  let allHeight = 0;
-  for (let i = 0; i < children.length; i++) {
+  for (let i = 0; i < focusIndex; i++) {
     const { offsetHeight } = children[i];
-    if (i < focusIndex) {
-      offset += offsetHeight;
-    }
-    allHeight += offsetHeight;
+    offset += offsetHeight;
   }
   (rect as Rect).offsetTop(-offset);
   menu.style.transformOrigin = `center ${
@@ -142,22 +138,30 @@ function openMenu<T>(
   attachElement(element, rect, menu);
 
   // Control not to overflow the screen range
-  const menuClientRect = menu.getBoundingClientRect();
-  const scaleDiff = (allHeight - menuClientRect.height) / 2;
-  const orgMenuTop = menuClientRect.top - scaleDiff;
+  const bkTransform = menu.style.transform;
+  let menuClientRect;
+  try {
+    // To calculate the original position, set `transform` to `none`.
+    menu.style.transform = "none";
+    menuClientRect = menu.getBoundingClientRect();
+  } finally {
+    menu.style.transform = bkTransform;
+  }
+  const orgMenuTop = menuClientRect.top;
   let menuTop = orgMenuTop;
-  const menuBottom = menuTop + allHeight;
   const winBottom = window.innerHeight;
   const winMargin = 20;
-  if (menuBottom > winBottom - winMargin) {
-    const diff = menuBottom - winBottom + winMargin;
+  if (menuClientRect.bottom > winBottom - winMargin) {
+    const diff = menuClientRect.bottom - winBottom + winMargin;
     menuTop -= diff;
   }
   if (menuTop < 0 /*winTop*/ + winMargin) {
     menuTop = winMargin;
   }
   if (menuTop !== orgMenuTop) {
     (rect as Rect).offsetTop(-(orgMenuTop - menuTop));
+    // Sets the center of the menu since it is not possible to determine the exact center of the selected element.
+    menu.style.transformOrigin = "center";
     // re update
     attachElement(element, rect, menu);
   }

diff --git a/packages/cheetah-grid/src/test/ListGrid_sample.js b/packages/cheetah-grid/src/test/ListGrid_sample.js
@@ -69,6 +69,7 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
 		{value: '5', label: 'Option 5'},
 		{value: '6', label: 'Option 6'},
 		{value: '7', label: 'Option 7'},
+		// ...Array(100).fill(0).map((_, i) => ({value: i + 1, label: 'Option ' + (i + 1)})),
 	];
 	const grid = new cheetahGrid.ListGrid({
 		parentElement: document.querySelector('#parent'),