Fix filter multi select

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterValueInput.tsx

@@ -22,7 +22,6 @@ export const AdvancedFilterViewFilterValueInput = ({
   const {
     setFilterDefinitionUsedInDropdown,
     setSelectedOperandInDropdown,
-    setIsObjectFilterDropdownOperandSelectUnfolded,
     setSelectedFilter,
   } = useFilterDropdown();
 
@@ -53,7 +52,6 @@ export const AdvancedFilterViewFilterValueInput = ({
       onOpen={() => {
         setFilterDefinitionUsedInDropdown(filter.definition);
         setSelectedOperandInDropdown(filter.operand);
-        setIsObjectFilterDropdownOperandSelectUnfolded(true);
         setSelectedFilter(filter);
       }}
       dropdownComponents={

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx

@@ -14,13 +14,11 @@ type MultipleFiltersDropdownButtonProps = {
 export const MultipleFiltersDropdownButton = ({
   hotkeyScope,
 }: MultipleFiltersDropdownButtonProps) => {
-  const { resetFilter, setIsObjectFilterDropdownOperandSelectUnfolded } =
-    useFilterDropdown();
+  const { resetFilter } = useFilterDropdown();
 
   const handleDropdownClose = useCallback(() => {
     resetFilter();
-    setIsObjectFilterDropdownOperandSelectUnfolded(false);
-  }, [resetFilter, setIsObjectFilterDropdownOperandSelectUnfolded]);
+  }, [resetFilter]);
 
   return (
     <Dropdown

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx

@@ -21,7 +21,6 @@ export const ObjectFilterDropdownDateInput = () => {
     filterDefinitionUsedInDropdownState,
     selectedOperandInDropdownState,
     selectedFilterState,
-    setIsObjectFilterDropdownUnfolded,
     selectFilter,
   } = useFilterDropdown();
 
@@ -65,8 +64,6 @@ export const ObjectFilterDropdownDateInput = () => {
       definition: filterDefinitionUsedInDropdown,
       viewFilterGroupId: selectedFilter?.viewFilterGroupId,
     });
-
-    setIsObjectFilterDropdownUnfolded(false);
   };
 
   const handleRelativeDateChange = (
@@ -95,8 +92,6 @@ export const ObjectFilterDropdownDateInput = () => {
       definition: filterDefinitionUsedInDropdown,
       viewFilterGroupId: selectedFilter?.viewFilterGroupId,
     });
-
-    setIsObjectFilterDropdownUnfolded(false);
   };
 
   const isRelativeOperand =

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx

@@ -28,13 +28,8 @@ export const ObjectFilterDropdownFilterInput = ({
   const {
     filterDefinitionUsedInDropdownState,
     selectedOperandInDropdownState,
-    isObjectFilterDropdownOperandSelectUnfoldedState,
   } = useFilterDropdown({ filterDropdownId });
 
-  const isObjectFilterDropdownOperandSelectUnfolded = useRecoilValue(
-    isObjectFilterDropdownOperandSelectUnfoldedState,
-  );
-
   const filterDefinitionUsedInDropdown = useRecoilValue(
     filterDefinitionUsedInDropdownState,
   );
@@ -58,9 +53,7 @@ export const ObjectFilterDropdownFilterInput = ({
       ViewFilterOperand.IsRelative,
     ].includes(selectedOperandInDropdown);
 
-  const shouldHide = isObjectFilterDropdownOperandSelectUnfolded;
-
-  if (shouldHide || !isDefined(filterDefinitionUsedInDropdown)) {
+  if (!isDefined(filterDefinitionUsedInDropdown)) {
     return null;
   }
 
@@ -84,6 +77,7 @@ export const ObjectFilterDropdownFilterInput = ({
           {filterDefinitionUsedInDropdown.type === 'RELATION' && (
             <>
               <ObjectFilterDropdownSearchInput />
+              <DropdownMenuSeparator />
               <ObjectFilterDropdownRecordSelect />
             </>
           )}
@@ -98,6 +92,7 @@ export const ObjectFilterDropdownFilterInput = ({
           ) && (
             <>
               <ObjectFilterDropdownSearchInput />
+              <DropdownMenuSeparator />
               <ObjectFilterDropdownOptionSelect />
             </>
           )}

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx

@@ -0,0 +1,51 @@
+import { useRecoilValue } from 'recoil';
+import { IconChevronDown } from 'twenty-ui';
+
+import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
+
+import { ObjectFilterDropdownOperandSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect';
+import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { getOperandLabel } from '../utils/getOperandLabel';
+
+const StyledDropdownMenuHeader = styled(DropdownMenuHeader)`
+  cursor: pointer;
+`;
+
+export const ObjectFilterDropdownOperandDropdown = ({
+  filterDropdownId,
+}: {
+  filterDropdownId?: string;
+}) => {
+  const { selectedOperandInDropdownState } = useFilterDropdown();
+
+  const selectedOperandInDropdown = useRecoilValue(
+    selectedOperandInDropdownState,
+  );
+
+  const theme = useTheme();
+
+  return (
+    <Dropdown
+      dropdownId={`${filterDropdownId}-operand-dropdown`}
+      clickableComponent={
+        <StyledDropdownMenuHeader
+          key={'selected-filter-operand'}
+          EndIcon={IconChevronDown}
+        >
+          {getOperandLabel(selectedOperandInDropdown)}
+        </StyledDropdownMenuHeader>
+      }
+      dropdownComponents={<ObjectFilterDropdownOperandSelect />}
+      dropdownHotkeyScope={{
+        scope: FiltersHotkeyScope.ObjectFilterDropdownOperandDropdown,
+      }}
+      dropdownOffset={{
+        x: parseInt(theme.spacing(2)),
+      }}
+    />
+  );
+};

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx

@@ -2,33 +2,35 @@ import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
+import styled from '@emotion/styled';
 import { MenuItem } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
-
-import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue';
 import { getOperandLabel } from '../utils/getOperandLabel';
 import { getOperandsForFilterDefinition } from '../utils/getOperandsForFilterType';
 
+const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
+  background-color: ${({ theme }) => theme.background.primary};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+`;
+
 export const ObjectFilterDropdownOperandSelect = () => {
   const {
     filterDefinitionUsedInDropdownState,
     setSelectedOperandInDropdown,
-    isObjectFilterDropdownOperandSelectUnfoldedState,
-    setIsObjectFilterDropdownOperandSelectUnfolded,
     selectedFilterState,
     selectFilter,
   } = useFilterDropdown();
 
+  const { closeDropdown } = useDropdown();
+
   const filterDefinitionUsedInDropdown = useRecoilValue(
     filterDefinitionUsedInDropdownState,
   );
 
-  const isObjectFilterDropdownOperandSelectUnfolded = useRecoilValue(
-    isObjectFilterDropdownOperandSelectUnfoldedState,
-  );
-
   const selectedFilter = useRecoilValue(selectedFilterState);
 
   const operandsForFilterType = isDefined(filterDefinitionUsedInDropdown)
@@ -45,7 +47,6 @@ export const ObjectFilterDropdownOperandSelect = () => {
     ].includes(newOperand);
 
     setSelectedOperandInDropdown(newOperand);
-    setIsObjectFilterDropdownOperandSelectUnfolded(false);
 
     if (isValuelessOperand && isDefined(filterDefinitionUsedInDropdown)) {
       selectFilter?.({
@@ -81,21 +82,18 @@ export const ObjectFilterDropdownOperandSelect = () => {
     }
   };
 
-  if (!isObjectFilterDropdownOperandSelectUnfolded) {
-    return <></>;
-  }
-
   return (
-    <DropdownMenuItemsContainer>
+    <StyledDropdownMenuItemsContainer>
       {operandsForFilterType.map((filterOperand, index) => (
         <MenuItem
           key={`select-filter-operand-${index}`}
           onClick={() => {
             handleOperandChange(filterOperand);
+            closeDropdown();
           }}
           text={getOperandLabel(filterOperand)}
         />
       ))}
-    </DropdownMenuItemsContainer>
+    </StyledDropdownMenuItemsContainer>
   );
 };

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterOperandSelectAndInput.tsx

@@ -1,5 +1,5 @@
 import { ObjectFilterDropdownFilterInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput';
-import { ObjectFilterDropdownFilterOperandSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterOperandSelect';
+import { ObjectFilterDropdownOperandDropdown } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown';
 
 type ObjectFilterOperandSelectAndInputProps = {
   filterDropdownId?: string;
@@ -10,7 +10,7 @@ export const ObjectFilterOperandSelectAndInput = ({
 }: ObjectFilterOperandSelectAndInputProps) => {
   return (
     <>
-      <ObjectFilterDropdownFilterOperandSelect
+      <ObjectFilterDropdownOperandDropdown
         filterDropdownId={filterDropdownId}
       />
       <ObjectFilterDropdownFilterInput filterDropdownId={filterDropdownId} />

packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/__tests__/useFilterDropdown.test.tsx

@@ -259,64 +259,6 @@ describe('useFilterDropdown', () => {
     });
   });
 
-  it('should set isObjectFilterDropdownOperandSelectUnfolded', async () => {
-    const { result } = renderHook(() => {
-      useFilterDropdown({ filterDropdownId });
-      const { isObjectFilterDropdownOperandSelectUnfoldedState } =
-        useFilterDropdownStates(filterDropdownId);
-
-      const [
-        isObjectFilterDropdownOperandSelectUnfolded,
-        setIsObjectFilterDropdownOperandSelectUnfolded,
-      ] = useRecoilState(isObjectFilterDropdownOperandSelectUnfoldedState);
-      return {
-        isObjectFilterDropdownOperandSelectUnfolded,
-        setIsObjectFilterDropdownOperandSelectUnfolded,
-      };
-    }, renderHookConfig);
-
-    expect(result.current.isObjectFilterDropdownOperandSelectUnfolded).toBe(
-      false,
-    );
-
-    act(() => {
-      result.current.setIsObjectFilterDropdownOperandSelectUnfolded(true);
-    });
-
-    await waitFor(() => {
-      expect(result.current.isObjectFilterDropdownOperandSelectUnfolded).toBe(
-        true,
-      );
-    });
-  });
-
-  it('should set isObjectFilterDropdownUnfolded', async () => {
-    const { result } = renderHook(() => {
-      useFilterDropdown({ filterDropdownId });
-      const { isObjectFilterDropdownUnfoldedState } =
-        useFilterDropdownStates(filterDropdownId);
-
-      const [
-        isObjectFilterDropdownUnfolded,
-        setIsObjectFilterDropdownUnfolded,
-      ] = useRecoilState(isObjectFilterDropdownUnfoldedState);
-      return {
-        isObjectFilterDropdownUnfolded,
-        setIsObjectFilterDropdownUnfolded,
-      };
-    }, renderHookConfig);
-
-    expect(result.current.isObjectFilterDropdownUnfolded).toBe(false);
-
-    act(() => {
-      result.current.setIsObjectFilterDropdownUnfolded(true);
-    });
-
-    await waitFor(() => {
-      expect(result.current.isObjectFilterDropdownUnfolded).toBe(true);
-    });
-  });
-
   it('should reset filter', async () => {
     const { result } = renderHook(() => {
       const { resetFilter, selectFilter } = useFilterDropdown({