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,