From d2fc5231247d44cb222fa80f292d7e7f131cdaa0 Mon Sep 17 00:00:00 2001
From: koji <baxin1919@gmail.com>
Date: Fri, 6 Dec 2024 11:45:28 -0500
Subject: [PATCH] fix(components): fix dropdownmenu expand direction

fix dropdownmenu expand direction

close RQA-3771
---
 .../src/molecules/DropdownMenu/index.tsx      | 55 ++++++++++---------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
index acfba246dc2..bf504011f1f 100644
--- 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)