From 4e8d8ce744a8acaa8a3152418daf5ef82b611d3c Mon Sep 17 00:00:00 2001
From: Harsh Singh <harshrajeevsingh@gmail.com>
Date: Thu, 24 Oct 2024 20:03:50 +0530
Subject: [PATCH] fix: relation picker should not move once openened (#8026)

Fixes: #7959

### Problem
- When searching in the dropdown, the results list would shrink based on
matching items
- This dynamic height change caused the dropdown to flip its position on
each keystroke

### Solution
- Added ```hasMinHeight``` as optional props to the
```DropdownMenuItemsContainer``` to maintain consistent height
- This prevents unwanted position recalculations and flipping while user
types
- The dropdown now stays in its initial position throughout the search
interaction

[Screencast from 2024-10-24
15-43-03.webm](https://github.com/user-attachments/assets/741317b7-fc5e-4874-8221-aa626a1a1747)
---
 .../relation-picker/components/MultiRecordSelect.tsx   |  2 +-
 .../dropdown/components/DropdownMenuItemsContainer.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
index 266defb445..fedb01ae89 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
@@ -113,7 +113,7 @@ export const MultiRecordSelect = ({
           autoFocus
         />
         <DropdownMenuSeparator />
-        <DropdownMenuItemsContainer hasMaxHeight>
+        <DropdownMenuItemsContainer hasMaxHeight hasMinHeight>
           {recordMultiSelectIsLoading ? (
             <MenuItem text="Loading..." />
           ) : (
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
index 652e43f148..86f43bbcd2 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
 const StyledDropdownMenuItemsExternalContainer = styled.div<{
+  hasMinHeight?: boolean;
   hasMaxHeight?: boolean;
 }>`
   --padding: ${({ theme }) => theme.spacing(1)};
@@ -12,7 +13,7 @@ const StyledDropdownMenuItemsExternalContainer = styled.div<{
 
   flex-direction: column;
   gap: 2px;
-  height: 100%;
+  min-height: ${({ hasMinHeight }) => (hasMinHeight ? '150px' : '100%')};
   max-height: ${({ hasMaxHeight }) => (hasMaxHeight ? '188px' : 'none')};
   overflow-y: auto;
 
@@ -37,13 +38,18 @@ const StyledDropdownMenuItemsInternalContainer = styled.div`
 
 export const DropdownMenuItemsContainer = ({
   children,
+  hasMinHeight,
   hasMaxHeight,
 }: {
   children: React.ReactNode;
+  hasMinHeight?: boolean;
   hasMaxHeight?: boolean;
 }) => {
   return (
-    <StyledDropdownMenuItemsExternalContainer hasMaxHeight={hasMaxHeight}>
+    <StyledDropdownMenuItemsExternalContainer
+      hasMaxHeight={hasMaxHeight}
+      hasMinHeight={hasMinHeight}
+    >
       {hasMaxHeight ? (
         <StyledScrollWrapper contextProviderName="dropdownMenuItemsContainer">
           <StyledDropdownMenuItemsInternalContainer>