fix: Auto Reset Opportunity Creation Search Field (#4951)

## Description

In the previous implementation, we saved the user's search field input.
However, I have introduced a new prop called `clearOnOpen`, which allows
us to reset the search field upon loading.

Closes: #4923 



https://github.com/twentyhq/twenty/assets/95065270/dd2cab30-ea47-444e-b356-d5c98087bcc6

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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);
   };

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 } =
+  const { handleSearchFilterChange } = useEntitySelectSearch({
-    useEntitySelectSearch({
+    relationPickerScopeId,
-      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 = ({
       <ObjectMetadataItemsRelationPickerEffect
         relationPickerScopeId={relationPickerScopeId}
       />
-      <DropdownMenuSearchInput
+      <DropdownMenuSearchInput onChange={handleSearchFilterChange} autoFocus />
-        value={searchFilter}
-        onChange={handleSearchFilterChange}
-        autoFocus
-      />
       <DropdownMenuSeparator />
       <SingleEntitySelectMenuItems
         entitiesToSelect={entities.entitiesToSelect}

packages/twenty-front/src/modules/object-record/relation-picker/hooks/useEntitySelectSearch.ts

@@ -7,12 +7,8 @@ export const useEntitySelectSearch = ({
 }: {
   relationPickerScopeId?: string;
 } = {}) => {
-  const {
+  const { setRelationPickerSearchFilter, setRelationPickerPreselectedId } =
-    relationPickerSearchFilter,
+    useRelationPicker({ relationPickerScopeId });
-    searchQuery,
-    setRelationPickerPreselectedId,
-    setRelationPickerSearchFilter,
-  } = useRelationPicker({ relationPickerScopeId });
 
   const debouncedSetSearchFilter = useDebouncedCallback(
     setRelationPickerSearchFilter,
@@ -22,6 +18,11 @@ export const useEntitySelectSearch = ({
     },
   );
 
+  const resetSearchFilter = () => {
+    debouncedSetSearchFilter('');
+    setRelationPickerPreselectedId('');
+  };
+
   const handleSearchFilterChange = (
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
@@ -30,8 +31,7 @@ export const useEntitySelectSearch = ({
   };
 
   return {
-    searchFilter: relationPickerSearchFilter,
-    searchQuery,
     handleSearchFilterChange,
+    resetSearchFilter,
   };
 };

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] =
+  const setRelationPickerSearchFilter = useSetRecoilState(
-    useRecoilState(relationPickerSearchFilterState);
+    relationPickerSearchFilterState,
+  );
 
   const [relationPickerPreselectedId, setRelationPickerPreselectedId] =
     useRecoilState(relationPickerPreselectedIdState);
 
   return {
     scopeId,
-    searchQuery,
     setSearchQuery,
-    relationPickerSearchFilter,
     setRelationPickerSearchFilter,
     relationPickerPreselectedId,
     setRelationPickerPreselectedId,