Fix filter multi select (#8682)

- Created a dropdown inside a dropdown for the
`ObjectFilterDropdownOperandDropdown` so the operand can be opened over
the selection with an offset
- Refactored dropdown component and introduced `DropdownUnmountEffect`
to close the dropdown when the component unmounts
- Removed old logic

Before:
<img width="216" alt="Capture d’écran 2024-11-22 à 14 03 58"
src="https://github.com/user-attachments/assets/3c1bba03-af03-4993-a070-f009b8dc876f">

After:
<img width="222" alt="Capture d’écran 2024-11-22 à 14 03 40"
src="https://github.com/user-attachments/assets/a8a784b4-8672-4b02-bb21-e4a749682f2e">

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

@@ -21,6 +21,7 @@ import { isDefined } from '~/utils/isDefined';
 import { useDropdown } from '../hooks/useDropdown';
 import { useInternalHotkeyScopeManagement } from '../hooks/useInternalHotkeyScopeManagement';
 
+import { DropdownUnmountEffect } from '@/ui/layout/dropdown/components/DropdownUnmountEffect';
 import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
 import { DropdownMenu } from './DropdownMenu';
 import { DropdownOnToggleEffect } from './DropdownOnToggleEffect';
@@ -149,25 +150,38 @@ export const Dropdown = ({
   );
 
   return (
-    <DropdownScope dropdownScopeId={getScopeIdFromComponentId(dropdownId)}>
-      <div ref={containerRef} className={className}>
-        {clickableComponent && (
-          <div
-            ref={refs.setReference}
-            onClick={handleClickableComponentClick}
-            className={className}
-          >
-            {clickableComponent}
-          </div>
-        )}
-        {hotkey && (
-          <HotkeyEffect
-            hotkey={hotkey}
-            onHotkeyTriggered={handleHotkeyTriggered}
-          />
-        )}
-        {isDropdownOpen && usePortal && (
-          <FloatingPortal>
+    <>
+      <DropdownScope dropdownScopeId={getScopeIdFromComponentId(dropdownId)}>
+        <div ref={containerRef} className={className}>
+          {clickableComponent && (
+            <div
+              ref={refs.setReference}
+              onClick={handleClickableComponentClick}
+              className={className}
+            >
+              {clickableComponent}
+            </div>
+          )}
+          {hotkey && (
+            <HotkeyEffect
+              hotkey={hotkey}
+              onHotkeyTriggered={handleHotkeyTriggered}
+            />
+          )}
+          {isDropdownOpen && usePortal && (
+            <FloatingPortal>
+              <DropdownMenu
+                disableBlur={disableBlur}
+                width={dropdownMenuWidth ?? dropdownWidth}
+                data-select-disable
+                ref={refs.setFloating}
+                style={floatingStyles}
+              >
+                {dropdownComponents}
+              </DropdownMenu>
+            </FloatingPortal>
+          )}
+          {isDropdownOpen && !usePortal && (
             <DropdownMenu
               disableBlur={disableBlur}
               width={dropdownMenuWidth ?? dropdownWidth}
@@ -177,24 +191,14 @@ export const Dropdown = ({
             >
               {dropdownComponents}
             </DropdownMenu>
-          </FloatingPortal>
-        )}
-        {isDropdownOpen && !usePortal && (
-          <DropdownMenu
-            disableBlur={disableBlur}
-            width={dropdownMenuWidth ?? dropdownWidth}
-            data-select-disable
-            ref={refs.setFloating}
-            style={floatingStyles}
-          >
-            {dropdownComponents}
-          </DropdownMenu>
-        )}
-        <DropdownOnToggleEffect
-          onDropdownClose={onClose}
-          onDropdownOpen={onOpen}
-        />
-      </div>
-    </DropdownScope>
+          )}
+          <DropdownOnToggleEffect
+            onDropdownClose={onClose}
+            onDropdownOpen={onOpen}
+          />
+        </div>
+      </DropdownScope>
+      <DropdownUnmountEffect dropdownId={dropdownId} />
+    </>
   );
 };