diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunityButton.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunityButton.tsx index 398990c5c..d085c69e9 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunityButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunityButton.tsx @@ -7,6 +7,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext'; import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext'; import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect'; +import { useEntitySelectSearch } from '@/object-record/relation-picker/hooks/useEntitySelectSearch'; import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect'; import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; @@ -41,9 +42,14 @@ export const RecordBoardColumnNewOpportunityButton = () => { setHotkeyScopeAndMemorizePreviousScope, } = usePreviousHotkeyScope(); + const { resetSearchFilter } = useEntitySelectSearch({ + relationPickerScopeId: 'relation-picker', + }); + const handleEntitySelect = (company?: EntityForSelect) => { setIsCreatingCard(false); goBackToPreviousHotkeyScope(); + resetSearchFilter(); if (!company) { return; @@ -65,6 +71,7 @@ export const RecordBoardColumnNewOpportunityButton = () => { }, [setIsCreatingCard, setHotkeyScopeAndMemorizePreviousScope]); const handleCancel = () => { + resetSearchFilter(); goBackToPreviousHotkeyScope(); setIsCreatingCard(false); }; diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx index c24c35aee..256b5bc9b 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx +++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx @@ -1,8 +1,11 @@ +import { useRecoilValue } from 'recoil'; + import { ObjectMetadataItemsRelationPickerEffect } from '@/object-metadata/components/ObjectMetadataItemsRelationPickerEffect'; import { SingleEntitySelectMenuItems, SingleEntitySelectMenuItemsProps, } from '@/object-record/relation-picker/components/SingleEntitySelectMenuItems'; +import { useRelationPickerScopedStates } from '@/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates'; import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; @@ -37,19 +40,29 @@ export const SingleEntitySelectMenuItemsWithSearch = ({ selectedEntity, selectedRelationRecordIds, }: SingleEntitySelectMenuItemsWithSearchProps) => { - const { searchFilter, searchQuery, handleSearchFilterChange } = - useEntitySelectSearch({ - relationPickerScopeId, + const { handleSearchFilterChange } = useEntitySelectSearch({ + relationPickerScopeId, + }); + + const { searchQueryState, relationPickerSearchFilterState } = + useRelationPickerScopedStates({ + relationPickerScopedId: relationPickerScopeId, }); - const showCreateButton = isDefined(onCreate) && searchFilter !== ''; + const searchQuery = useRecoilValue(searchQueryState); + const relationPickerSearchFilter = useRecoilValue( + relationPickerSearchFilterState, + ); + + const showCreateButton = + isDefined(onCreate) && relationPickerSearchFilter !== ''; const entities = useFilteredSearchEntityQuery({ filters: [ { fieldNames: searchQuery?.computeFilterFields?.(relationObjectNameSingular) ?? [], - filter: searchFilter, + filter: relationPickerSearchFilter, }, ], orderByField: 'createdAt', @@ -63,11 +76,7 @@ export const SingleEntitySelectMenuItemsWithSearch = ({ - + { - const { - relationPickerSearchFilter, - searchQuery, - setRelationPickerPreselectedId, - setRelationPickerSearchFilter, - } = useRelationPicker({ relationPickerScopeId }); + const { setRelationPickerSearchFilter, setRelationPickerPreselectedId } = + useRelationPicker({ relationPickerScopeId }); const debouncedSetSearchFilter = useDebouncedCallback( setRelationPickerSearchFilter, @@ -22,6 +18,11 @@ export const useEntitySelectSearch = ({ }, ); + const resetSearchFilter = () => { + debouncedSetSearchFilter(''); + setRelationPickerPreselectedId(''); + }; + const handleSearchFilterChange = ( event: React.ChangeEvent, ) => { @@ -30,8 +31,7 @@ export const useEntitySelectSearch = ({ }; return { - searchFilter: relationPickerSearchFilter, - searchQuery, handleSearchFilterChange, + resetSearchFilter, }; }; diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useRelationPicker.ts b/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useRelationPicker.ts index b0bd18ebe..b327099bb 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useRelationPicker.ts +++ b/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useRelationPicker.ts @@ -1,4 +1,4 @@ -import { useRecoilState } from 'recoil'; +import { useRecoilState, useSetRecoilState } from 'recoil'; import { useRelationPickerScopedStates } from '@/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates'; import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext'; @@ -22,19 +22,18 @@ export const useRelationPicker = (props?: useRelationPickeProps) => { relationPickerScopedId: scopeId, }); - const [searchQuery, setSearchQuery] = useRecoilState(searchQueryState); + const setSearchQuery = useSetRecoilState(searchQueryState); - const [relationPickerSearchFilter, setRelationPickerSearchFilter] = - useRecoilState(relationPickerSearchFilterState); + const setRelationPickerSearchFilter = useSetRecoilState( + relationPickerSearchFilterState, + ); const [relationPickerPreselectedId, setRelationPickerPreselectedId] = useRecoilState(relationPickerPreselectedIdState); return { scopeId, - searchQuery, setSearchQuery, - relationPickerSearchFilter, setRelationPickerSearchFilter, relationPickerPreselectedId, setRelationPickerPreselectedId,