fix(components): fix dropdownmenu expand direction

fix dropdownmenu expand direction close RQA-3771
Opentrons · Dec 6, 2024 · d2fc523 · d2fc523
1 parent fd2bab7
commit d2fc523
Showing 1 changed file with 28 additions and 27 deletions.
diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
@@ -114,37 +114,38 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     }
 
     const handlePositionCalculation = (): void => {
-      const dropdownRect = dropDownMenuWrapperRef.current?.getBoundingClientRect()
-      if (dropdownRect != null) {
-        const parentElement = dropDownMenuWrapperRef?.current?.parentElement
-        const grandParentElement = parentElement?.parentElement?.parentElement
-        let availableHeight = window.innerHeight
-        let scrollOffset = 0
+      const dropdownRect = dropDownMenuWrapperRef.current?.getBoundingClientRect();
+      if (!dropdownRect) return;
 
-        if (grandParentElement != null) {
-          const grandParentRect = grandParentElement.getBoundingClientRect()
-          availableHeight = grandParentRect.bottom - grandParentRect.top
-          scrollOffset = grandParentRect.top
-        } else if (parentElement != null) {
-          const parentRect = parentElement.getBoundingClientRect()
-          availableHeight = parentRect.bottom - parentRect.top
-          scrollOffset = parentRect.top
-        }
+      const parentElement = dropDownMenuWrapperRef.current?.parentElement;
+      const grandParentElement = parentElement?.parentElement?.parentElement;
 
-        const downSpace =
-          filterOptions.length + 1 > 10
-            ? MAX_HEIGHT
-            : (filterOptions.length + 1) * 34
-        const dropdownBottom = dropdownRect.bottom + downSpace - scrollOffset
+      let availableHeight = window.innerHeight;
+      let scrollOffset = 0;
 
-        setDropdownPosition(
-          dropdownBottom > availableHeight &&
-            Math.abs(dropdownBottom - availableHeight) > HEIGHT_ADJUSTMENT
-            ? 'top'
-            : 'bottom'
-        )
+      if (grandParentElement) {
+        const grandParentRect = grandParentElement.getBoundingClientRect();
+        availableHeight = grandParentRect.bottom - grandParentRect.top;
+        scrollOffset = grandParentRect.top;
+      } else if (parentElement) {
+        const parentRect = parentElement.getBoundingClientRect();
+        availableHeight = parentRect.bottom - parentRect.top;
+        scrollOffset = parentRect.top;
       }
-    }
+
+      const dropdownHeight = filterOptions.length * 34 + 10; // note (kk:2024/12/06) need to modify the value since design uses different height in desktop and pd 
+      const dropdownBottom = dropdownRect.bottom + dropdownHeight - scrollOffset;
+
+      const fitsBelow = dropdownBottom <= availableHeight;
+      const fitsAbove = dropdownRect.top - dropdownHeight >= scrollOffset;
+
+      // Determine position based on fit or default to `bottom`
+      if (menuPlacement === 'auto') {
+        setDropdownPosition(fitsBelow ? 'bottom' : fitsAbove ? 'top' : 'bottom');
+      } else {
+        setDropdownPosition(menuPlacement);
+      }
+    };
 
     window.addEventListener('resize', handlePositionCalculation)
     window.addEventListener('scroll', handlePositionCalculation)