5922 - UI Overlap and State Persistence in Filter Menus (#7270)

fixes #5922 


https://github.com/user-attachments/assets/07d088da-cefb-4d87-9016-e14cef18567d

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

@@ -2,6 +2,7 @@ import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdow
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { useCallback } from 'react';
 
 import { MultipleFiltersButton } from './MultipleFiltersButton';
 import { MultipleFiltersDropdownContent } from './MultipleFiltersDropdownContent';
@@ -13,12 +14,18 @@ type MultipleFiltersDropdownButtonProps = {
 export const MultipleFiltersDropdownButton = ({
   hotkeyScope,
 }: MultipleFiltersDropdownButtonProps) => {
-  const { resetFilter } = useFilterDropdown();
+  const { resetFilter, setIsObjectFilterDropdownOperandSelectUnfolded } =
+    useFilterDropdown();
+
+  const handleDropdownClose = useCallback(() => {
+    resetFilter();
+    setIsObjectFilterDropdownOperandSelectUnfolded(false);
+  }, [resetFilter, setIsObjectFilterDropdownOperandSelectUnfolded]);
 
   return (
     <Dropdown
       dropdownId={OBJECT_FILTER_DROPDOWN_ID}
-      onClose={resetFilter}
+      onClose={handleDropdownClose}
       clickableComponent={<MultipleFiltersButton />}
       dropdownComponents={<MultipleFiltersDropdownContent />}
       dropdownHotkeyScope={hotkeyScope}

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

@@ -1,11 +1,9 @@
-import { useRecoilValue } from 'recoil';
+import { ObjectFilterDropdownRatingInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput';
-
 import { ObjectFilterDropdownSearchInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
-import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
-
+import styled from '@emotion/styled';
-import { ObjectFilterDropdownRatingInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput';
+import { useRecoilValue } from 'recoil';
 import { MultipleFiltersDropdownFilterOnFilterChangedEffect } from './MultipleFiltersDropdownFilterOnFilterChangedEffect';
 import { ObjectFilterDropdownDateInput } from './ObjectFilterDropdownDateInput';
 import { ObjectFilterDropdownFilterSelect } from './ObjectFilterDropdownFilterSelect';
@@ -16,6 +14,21 @@ import { ObjectFilterDropdownOptionSelect } from './ObjectFilterDropdownOptionSe
 import { ObjectFilterDropdownRecordSelect } from './ObjectFilterDropdownRecordSelect';
 import { ObjectFilterDropdownTextSearchInput } from './ObjectFilterDropdownTextSearchInput';
 
+const StyledContainer = styled.div`
+  position: relative;
+`;
+
+const StyledOperandSelectContainer = styled.div`
+  background: ${({ theme }) => theme.background.secondary};
+  box-shadow: ${({ theme }) => theme.boxShadow.light};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  left: 10px;
+  position: absolute;
+  top: 10px;
+  width: 100%;
+  z-index: 1000;
+`;
+
 type MultipleFiltersDropdownContentProps = {
   filterDropdownId?: string;
 };
@@ -24,20 +37,23 @@ export const MultipleFiltersDropdownContent = ({
   filterDropdownId,
 }: MultipleFiltersDropdownContentProps) => {
   const {
-    isObjectFilterDropdownOperandSelectUnfoldedState,
     filterDefinitionUsedInDropdownState,
     selectedOperandInDropdownState,
+    isObjectFilterDropdownOperandSelectUnfoldedState,
   } = useFilterDropdown({ filterDropdownId });
 
   const isObjectFilterDropdownOperandSelectUnfolded = useRecoilValue(
     isObjectFilterDropdownOperandSelectUnfoldedState,
   );
+
   const filterDefinitionUsedInDropdown = useRecoilValue(
     filterDefinitionUsedInDropdownState,
   );
+
   const selectedOperandInDropdown = useRecoilValue(
     selectedOperandInDropdownState,
   );
+
   const isEmptyOperand =
     selectedOperandInDropdown &&
     [ViewFilterOperand.IsEmpty, ViewFilterOperand.IsNotEmpty].includes(
@@ -45,18 +61,19 @@ export const MultipleFiltersDropdownContent = ({
     );
 
   return (
-    <>
+    <StyledContainer>
       {!filterDefinitionUsedInDropdown ? (
         <ObjectFilterDropdownFilterSelect />
-      ) : isObjectFilterDropdownOperandSelectUnfolded ? (
-        <ObjectFilterDropdownOperandSelect />
-      ) : isEmptyOperand ? (
-        <ObjectFilterDropdownOperandButton />
       ) : (
-        selectedOperandInDropdown && (
         <>
           <ObjectFilterDropdownOperandButton />
-            <DropdownMenuSeparator />
+          {isObjectFilterDropdownOperandSelectUnfolded && (
+            <StyledOperandSelectContainer>
+              <ObjectFilterDropdownOperandSelect />
+            </StyledOperandSelectContainer>
+          )}
+          {!isEmptyOperand && selectedOperandInDropdown && (
+            <>
               {[
                 'TEXT',
                 'EMAIL',
@@ -84,25 +101,24 @@ export const MultipleFiltersDropdownContent = ({
               {filterDefinitionUsedInDropdown.type === 'RELATION' && (
                 <>
                   <ObjectFilterDropdownSearchInput />
-                <DropdownMenuSeparator />
                   <ObjectFilterDropdownRecordSelect />
                 </>
               )}
               {filterDefinitionUsedInDropdown.type === 'SELECT' && (
                 <>
                   <ObjectFilterDropdownSearchInput />
-                <DropdownMenuSeparator />
                   <ObjectFilterDropdownOptionSelect />
                 </>
               )}
             </>
-        )
+          )}
+        </>
       )}
       <MultipleFiltersDropdownFilterOnFilterChangedEffect
         filterDefinitionUsedInDropdownType={
           filterDefinitionUsedInDropdown?.type
         }
       />
-    </>
+    </StyledContainer>
   );
 };

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

@@ -10,19 +10,11 @@ export const ObjectFilterDropdownOperandButton = () => {
   const {
     selectedOperandInDropdownState,
     setIsObjectFilterDropdownOperandSelectUnfolded,
-    isObjectFilterDropdownOperandSelectUnfoldedState,
   } = useFilterDropdown();
 
   const selectedOperandInDropdown = useRecoilValue(
     selectedOperandInDropdownState,
   );
-  const isObjectFilterDropdownOperandSelectUnfolded = useRecoilValue(
-    isObjectFilterDropdownOperandSelectUnfoldedState,
-  );
-
-  if (isObjectFilterDropdownOperandSelectUnfolded) {
-    return null;
-  }
 
   return (
     <DropdownMenuHeader

packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx

@@ -39,6 +39,21 @@ export const StyledInput = styled.input`
   }
 `;
 
+const StyledContainer = styled.div`
+  position: relative;
+`;
+
+const StyledSelectedSortDirectionContainer = styled.div`
+  background: ${({ theme }) => theme.background.secondary};
+  box-shadow: ${({ theme }) => theme.boxShadow.light};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  left: 10px;
+  position: absolute;
+  top: 10px;
+  width: 100%;
+  z-index: 1000;
+`;
+
 export type ObjectSortDropdownButtonProps = {
   sortDropdownId: string;
   hotkeyScope: HotkeyScope;
@@ -95,7 +110,8 @@ export const ObjectSortDropdownButton = ({
         }
         dropdownComponents={
           <>
-            {isSortDirectionMenuUnfolded ? (
+            {isSortDirectionMenuUnfolded && (
+              <StyledSelectedSortDirectionContainer>
                 <DropdownMenuItemsContainer>
                   {SORT_DIRECTIONS.map((sortOrder, index) => (
                     <MenuItem
@@ -108,8 +124,9 @@ export const ObjectSortDropdownButton = ({
                     />
                   ))}
                 </DropdownMenuItemsContainer>
-            ) : (
+              </StyledSelectedSortDirectionContainer>
-              <>
+            )}
+            <StyledContainer>
               <DropdownMenuHeader
                 EndIcon={IconChevronDown}
                 onClick={() => setIsSortDirectionMenuUnfolded(true)}
@@ -147,8 +164,7 @@ export const ObjectSortDropdownButton = ({
                     />
                   ))}
               </DropdownMenuItemsContainer>
-              </>
+            </StyledContainer>
-            )}
           </>
         }
         onClose={handleDropdownButtonClose}

packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx

@@ -29,6 +29,7 @@ export const EditableFilterDropdownButton = ({
     setFilterDefinitionUsedInDropdown,
     setSelectedOperandInDropdown,
     setSelectedFilter,
+    setIsObjectFilterDropdownOperandSelectUnfolded,
   } = useFilterDropdown({
     filterDropdownId: viewFilterDropdownId,
   });
@@ -79,6 +80,10 @@ export const EditableFilterDropdownButton = ({
     }
   }, [viewFilter, deleteCombinedViewFilter]);
 
+  const handleDropdownClose = useCallback(() => {
+    setIsObjectFilterDropdownOperandSelectUnfolded(false);
+  }, [setIsObjectFilterDropdownOperandSelectUnfolded]);
+
   return (
     <Dropdown
       dropdownId={viewFilterDropdownId}
@@ -94,6 +99,7 @@ export const EditableFilterDropdownButton = ({
       dropdownOffset={{ y: 8, x: 0 }}
       dropdownPlacement="bottom-start"
       onClickOutside={handleDropdownClickOutside}
+      onClose={handleDropdownClose}
     />
   );
 };