diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelectContent.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelectContent.tsx index b75f4dd108..8b97abd4c5 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelectContent.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelectContent.tsx @@ -1,4 +1,5 @@ import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset'; +import { useSetRecordFilterUsedInAdvancedFilterDropdownRow } from '@/object-record/advanced-filter/hooks/useSetRecordFilterUsedInAdvancedFilterDropdownRow'; import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext'; import { useApplyObjectFilterDropdownOperand } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand'; @@ -42,12 +43,19 @@ export const AdvancedFilterRecordFilterOperandSelectContent = ({ const { applyObjectFilterDropdownOperand } = useApplyObjectFilterDropdownOperand(); + const { setRecordFilterUsedInAdvancedFilterDropdownRow } = + useSetRecordFilterUsedInAdvancedFilterDropdownRow(); + const handleOperandChange = (operand: ViewFilterOperand) => { closeDropdown(dropdownId); applyObjectFilterDropdownOperand(operand); }; + const handleDropdownOpen = () => { + setRecordFilterUsedInAdvancedFilterDropdownRow(filter); + }; + const selectedItemId = useAtomComponentStateValue( selectedItemIdComponentState, dropdownId, @@ -111,6 +119,7 @@ export const AdvancedFilterRecordFilterOperandSelectContent = ({ } dropdownOffset={DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET} dropdownPlacement="bottom-start" + onOpen={handleDropdownOpen} /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInput.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInput.tsx index 90efd0e171..ea91f1feb8 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInput.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInput.tsx @@ -2,11 +2,10 @@ import { AdvancedFilterDropdownFilterInput } from '@/object-record/advanced-filt import { AdvancedFilterDropdownTextInput } from '@/object-record/advanced-filter/components/AdvancedFilterDropdownTextInput'; import { AdvancedFilterValueInputDropdownButtonClickableSelect } from '@/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButtonClickableSelect'; import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset'; +import { useSetRecordFilterUsedInAdvancedFilterDropdownRow } from '@/object-record/advanced-filter/hooks/useSetRecordFilterUsedInAdvancedFilterDropdownRow'; +import { getAdvancedFilterObjectFilterDropdownComponentInstanceId } from '@/object-record/advanced-filter/utils/getAdvancedFilterObjectFilterDropdownComponentInstanceId'; import { shouldShowFilterTextInput } from '@/object-record/advanced-filter/utils/shouldShowFilterTextInput'; -import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState'; -import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState'; import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState'; -import { relationTargetFieldMetadataIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/relationTargetFieldMetadataIdUsedInDropdownComponentState'; import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState'; import { configurableViewFilterOperands } from '@/object-record/object-filter-dropdown/utils/configurableViewFilterOperands'; import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState'; @@ -31,13 +30,16 @@ export const AdvancedFilterValueInput = ({ }: AdvancedFilterValueInputProps) => { const dropdownId = `advanced-filter-view-filter-value-input-${recordFilterId}`; + const objectFilterDropdownInstanceId = + getAdvancedFilterObjectFilterDropdownComponentInstanceId(recordFilterId); + const currentRecordFilters = useAtomComponentStateValue( currentRecordFiltersComponentState, ); const subFieldNameUsedInDropdown = useAtomComponentStateValue( subFieldNameUsedInDropdownComponentState, - dropdownId, + objectFilterDropdownInstanceId, ); const recordFilter = currentRecordFilters.find( @@ -48,24 +50,11 @@ export const AdvancedFilterValueInput = ({ const setObjectFilterDropdownSearchInput = useSetAtomComponentState( objectFilterDropdownSearchInputComponentState, - dropdownId, + objectFilterDropdownInstanceId, ); - const setFieldMetadataItemIdUsedInDropdown = useSetAtomComponentState( - fieldMetadataItemIdUsedInDropdownComponentState, - dropdownId, - ); - - const setRelationTargetFieldMetadataIdUsedInDropdown = - useSetAtomComponentState( - relationTargetFieldMetadataIdUsedInDropdownComponentState, - dropdownId, - ); - - const setObjectFilterDropdownCurrentRecordFilter = useSetAtomComponentState( - objectFilterDropdownCurrentRecordFilterComponentState, - dropdownId, - ); + const { setRecordFilterUsedInAdvancedFilterDropdownRow } = + useSetRecordFilterUsedInAdvancedFilterDropdownRow(); const operandHasNoInput = recordFilter && !configurableViewFilterOperands.has(recordFilter.operand); @@ -79,11 +68,7 @@ export const AdvancedFilterValueInput = ({ }; const handleFilterValueDropdownOpen = () => { - setObjectFilterDropdownCurrentRecordFilter(recordFilter); - setFieldMetadataItemIdUsedInDropdown(recordFilter.fieldMetadataId); - setRelationTargetFieldMetadataIdUsedInDropdown( - recordFilter.relationTargetFieldMetadataId ?? null, - ); + setRecordFilterUsedInAdvancedFilterDropdownRow(recordFilter); }; const filterType = recordFilter.type; @@ -95,7 +80,8 @@ export const AdvancedFilterValueInput = ({ const showFilterTextInputInsteadOfDropdown = shouldShowFilterTextInput({ recordFilter, - subFieldNameUsedInDropdown, + subFieldNameUsedInDropdown: + subFieldNameUsedInDropdown ?? recordFilter.subFieldName, }); return ( diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useSetRecordFilterUsedInAdvancedFilterDropdownRow.ts b/packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useSetRecordFilterUsedInAdvancedFilterDropdownRow.ts index cc1bdd8688..3803cc456a 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useSetRecordFilterUsedInAdvancedFilterDropdownRow.ts +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useSetRecordFilterUsedInAdvancedFilterDropdownRow.ts @@ -1,7 +1,9 @@ import { getAdvancedFilterObjectFilterDropdownComponentInstanceId } from '@/object-record/advanced-filter/utils/getAdvancedFilterObjectFilterDropdownComponentInstanceId'; import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState'; import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState'; +import { relationTargetFieldMetadataIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/relationTargetFieldMetadataIdUsedInDropdownComponentState'; import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; +import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState'; import { type RecordFilter } from '@/object-record/record-filter/types/RecordFilter'; import { useCallback } from 'react'; import { useStore } from 'jotai'; @@ -35,6 +37,20 @@ export const useSetRecordFilterUsedInAdvancedFilterDropdownRow = () => { }), recordFilter, ); + + store.set( + subFieldNameUsedInDropdownComponentState.atomFamily({ + instanceId: advancedFilterRowObjectFilterDropdownComponentInstanceId, + }), + recordFilter.subFieldName, + ); + + store.set( + relationTargetFieldMetadataIdUsedInDropdownComponentState.atomFamily({ + instanceId: advancedFilterRowObjectFilterDropdownComponentInstanceId, + }), + recordFilter.relationTargetFieldMetadataId ?? null, + ); }, [store], );