fix glitch for relation picker search (#8040)

Fix for #7957

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -6,7 +6,7 @@ import {
   Placement,
   useFloating,
 } from '@floating-ui/react';
-import { MouseEvent, useRef } from 'react';
+import { MouseEvent, useEffect, useRef } from 'react';
 import { Keys } from 'react-hotkeys-hook';
 import { Key } from 'ts-key-enum';
 
@@ -64,8 +64,13 @@ export const Dropdown = ({
 }: DropdownProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const { isDropdownOpen, toggleDropdown, closeDropdown, dropdownWidth } =
-    useDropdown(dropdownId);
+  const {
+    isDropdownOpen,
+    toggleDropdown,
+    closeDropdown,
+    dropdownWidth,
+    setDropdownPlacement,
+  } = useDropdown(dropdownId);
 
   const offsetMiddlewares = [];
 
@@ -77,13 +82,17 @@ export const Dropdown = ({
     offsetMiddlewares.push(offset({ mainAxis: dropdownOffset.y }));
   }
 
-  const { refs, floatingStyles } = useFloating({
+  const { refs, floatingStyles, placement } = useFloating({
     placement: dropdownPlacement,
     middleware: [flip(), ...offsetMiddlewares],
     whileElementsMounted: autoUpdate,
     strategy: dropdownStrategy,
   });
 
+  useEffect(() => {
+    setDropdownPlacement(placement);
+  }, [placement, setDropdownPlacement]);
+
   const handleHotkeyTriggered = () => {
     toggleDropdown();
   };

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx

@@ -3,7 +3,6 @@ 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)};
@@ -13,7 +12,6 @@ const StyledDropdownMenuItemsExternalContainer = styled.div<{
 
   flex-direction: column;
   gap: 2px;
-  min-height: ${({ hasMinHeight }) => (hasMinHeight ? '150px' : '100%')};
   max-height: ${({ hasMaxHeight }) => (hasMaxHeight ? '188px' : 'none')};
   overflow-y: auto;
 
@@ -38,18 +36,13 @@ const StyledDropdownMenuItemsInternalContainer = styled.div`
 
 export const DropdownMenuItemsContainer = ({
   children,
-  hasMinHeight,
   hasMaxHeight,
 }: {
   children: React.ReactNode;
-  hasMinHeight?: boolean;
   hasMaxHeight?: boolean;
 }) => {
   return (
-    <StyledDropdownMenuItemsExternalContainer
-      hasMaxHeight={hasMaxHeight}
-      hasMinHeight={hasMinHeight}
-    >
+    <StyledDropdownMenuItemsExternalContainer hasMaxHeight={hasMaxHeight}>
       {hasMaxHeight ? (
         <StyledScrollWrapper contextProviderName="dropdownMenuItemsContainer">
           <StyledDropdownMenuItemsInternalContainer>

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts

@@ -1,5 +1,6 @@
 import { DropdownScopeInternalContext } from '@/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext';
 import { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState';
+import { dropdownPlacementComponentState } from '@/ui/layout/dropdown/states/dropdownPlacementComponentState';
 import { dropdownWidthComponentState } from '@/ui/layout/dropdown/states/dropdownWidthComponentState';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
@@ -19,6 +20,10 @@ export const useDropdownStates = ({
 
   return {
     scopeId,
+    dropdownPlacementState: extractComponentState(
+      dropdownPlacementComponentState,
+      scopeId,
+    ),
     dropdownHotkeyScopeState: extractComponentState(
       dropdownHotkeyComponentState,
       scopeId,

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts

@@ -12,6 +12,7 @@ export const useDropdown = (dropdownId?: string) => {
     dropdownHotkeyScopeState,
     dropdownWidthState,
     isDropdownOpenState,
+    dropdownPlacementState,
   } = useDropdownStates({
     dropdownScopeId: getScopeIdOrUndefinedFromComponentId(dropdownId),
   });
@@ -25,6 +26,10 @@ export const useDropdown = (dropdownId?: string) => {
 
   const [dropdownWidth, setDropdownWidth] = useRecoilState(dropdownWidthState);
 
+  const [dropdownPlacement, setDropdownPlacement] = useRecoilState(
+    dropdownPlacementState,
+  );
+
   const [isDropdownOpen, setIsDropdownOpen] =
     useRecoilState(isDropdownOpenState);
 
@@ -59,5 +64,7 @@ export const useDropdown = (dropdownId?: string) => {
     openDropdown,
     dropdownWidth,
     setDropdownWidth,
+    dropdownPlacement,
+    setDropdownPlacement,
   };
 };

packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentState.ts

@@ -0,0 +1,9 @@
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+import { Placement } from '@floating-ui/react';
+
+export const dropdownPlacementComponentState =
+  createComponentState<Placement | null>({
+    key: 'dropdownPlacementComponentState',
+    defaultValue: null,
+  });