fix(components): fix dropdownmenu expand direction (#17055)

* fix(components): fix dropdownmenu expand direction
Opentrons · Dec 6, 2024 · 5c411b6 · 5c411b6
1 parent fd2bab7
commit 5c411b6
Showing 1 changed file with 25 additions and 31 deletions.
diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
@@ -25,12 +25,6 @@ import { Tooltip } from '../../atoms/Tooltip'
 import { StyledText } from '../../atoms/StyledText'
 import { LiquidIcon } from '../LiquidIcon'
 
-/** this is the max height to display 10 items */
-const MAX_HEIGHT = 316
-
-/** this is for adjustment variable for the case that the space of the bottom and the space of the top are very close */
-const HEIGHT_ADJUSTMENT = 100
-
 export interface DropdownOption {
   name: string
   value: string
@@ -115,34 +109,34 @@ 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
+      if (!dropdownRect) return
+
+      const parentElement = dropDownMenuWrapperRef.current?.parentElement
+      const grandParentElement = parentElement?.parentElement?.parentElement
+
+      let availableHeight = window.innerHeight
+      let scrollOffset = 0
+
+      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
+      }
 
-        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 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 downSpace =
-          filterOptions.length + 1 > 10
-            ? MAX_HEIGHT
-            : (filterOptions.length + 1) * 34
-        const dropdownBottom = dropdownRect.bottom + downSpace - scrollOffset
+      const fitsBelow = dropdownBottom <= availableHeight
+      const fitsAbove = dropdownRect.top - dropdownHeight >= scrollOffset
 
-        setDropdownPosition(
-          dropdownBottom > availableHeight &&
-            Math.abs(dropdownBottom - availableHeight) > HEIGHT_ADJUSTMENT
-            ? 'top'
-            : 'bottom'
-        )
+      if (menuPlacement === 'auto') {
+        setDropdownPosition(fitsBelow ? 'bottom' : fitsAbove ? 'top' : 'bottom')
+      } else {
+        setDropdownPosition(menuPlacement)
       }
     }