Fix broken relation picker in Kanban (#8377)

Fixes https://github.com/twentyhq/twenty/issues/8233

Typing a search input was triggering a re-render of the whole
RecordBoardCard, resetting the search input to its initial value, an
empty string, making it impossible to actually type anything.
useRelationPicker had (legacy?) useless dependencies to recoil states
that caused the rerenders.

packages/twenty-front/src/modules/object-record/relation-picker/components/RelationPicker.tsx

@@ -1,13 +1,13 @@
-import { useContext, useEffect } from 'react';
+import { useContext } from 'react';
 import { IconForbid } from 'twenty-ui';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
 import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { SearchPickerInitialValueEffect } from '@/object-record/relation-picker/components/SearchPickerInitialValueEffect';
 import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect';
 import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/relation-picker/hooks/useAddNewRecordAndOpenRightDrawer';
-import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
 
 export type RelationPickerProps = {
@@ -30,13 +30,6 @@ export const RelationPicker = ({
   fieldDefinition,
 }: RelationPickerProps) => {
   const relationPickerScopeId = 'relation-picker';
-  const { setRelationPickerSearchFilter } = useRelationPicker({
-    relationPickerScopeId,
-  });
-
-  useEffect(() => {
-    setRelationPickerSearchFilter(initialSearchFilter ?? '');
-  }, [initialSearchFilter, setRelationPickerSearchFilter]);
 
   const handleEntitySelected = (
     selectedEntity: EntityForSelect | null | undefined,
@@ -64,19 +57,25 @@ export const RelationPicker = ({
     });
 
   return (
-    <SingleEntitySelect
-      EmptyIcon={IconForbid}
-      emptyLabel={'No ' + fieldDefinition.label}
-      onCancel={onCancel}
-      onCreate={createNewRecordAndOpenRightDrawer}
-      onEntitySelected={handleEntitySelected}
-      width={width}
-      relationObjectNameSingular={
-        fieldDefinition.metadata.relationObjectMetadataNameSingular
-      }
-      relationPickerScopeId={relationPickerScopeId}
-      selectedRelationRecordIds={selectedRecordId ? [selectedRecordId] : []}
-      excludedRelationRecordIds={excludeRecordIds}
-    />
+    <>
+      <SearchPickerInitialValueEffect
+        initialValueForSearchFilter={initialSearchFilter}
+        relationPickerScopeId={relationPickerScopeId}
+      />
+      <SingleEntitySelect
+        EmptyIcon={IconForbid}
+        emptyLabel={'No ' + fieldDefinition.label}
+        onCancel={onCancel}
+        onCreate={createNewRecordAndOpenRightDrawer}
+        onEntitySelected={handleEntitySelected}
+        width={width}
+        relationObjectNameSingular={
+          fieldDefinition.metadata.relationObjectMetadataNameSingular
+        }
+        relationPickerScopeId={relationPickerScopeId}
+        selectedRelationRecordIds={selectedRecordId ? [selectedRecordId] : []}
+        excludedRelationRecordIds={excludeRecordIds}
+      />
+    </>
   );
 };

packages/twenty-front/src/modules/object-record/relation-picker/components/SearchPickerInitialValueEffect.tsx

@@ -0,0 +1,25 @@
+import { getRelationPickerScopedStates } from '@/object-record/relation-picker/utils/getRelationPickerScopedStates';
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+export const SearchPickerInitialValueEffect = ({
+  initialValueForSearchFilter,
+  relationPickerScopeId,
+}: {
+  initialValueForSearchFilter?: string | null;
+  relationPickerScopeId: string;
+}) => {
+  const { relationPickerSearchFilterState } = getRelationPickerScopedStates({
+    relationPickerScopeId: relationPickerScopeId,
+  });
+
+  const setRelationPickerSearchFilter = useSetRecoilState(
+    relationPickerSearchFilterState,
+  );
+
+  useEffect(() => {
+    setRelationPickerSearchFilter(initialValueForSearchFilter ?? '');
+  }, [initialValueForSearchFilter, setRelationPickerSearchFilter]);
+
+  return <></>;
+};

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

@@ -1,4 +1,4 @@
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { 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';
@@ -14,33 +14,21 @@ export const useRelationPicker = (props?: useRelationPickeProps) => {
     props?.relationPickerScopeId,
   );
 
-  const {
-    searchQueryState,
-    relationPickerSearchFilterState,
-    relationPickerPreselectedIdState,
-  } = useRelationPickerScopedStates({
-    relationPickerScopedId: scopeId,
-  });
-
-  const setSearchQuery = useSetRecoilState(searchQueryState);
+  const { relationPickerSearchFilterState, relationPickerPreselectedIdState } =
+    useRelationPickerScopedStates({
+      relationPickerScopedId: scopeId,
+    });
 
   const setRelationPickerSearchFilter = useSetRecoilState(
     relationPickerSearchFilterState,
   );
 
-  const relationPickerSearchFilter = useRecoilValue(
-    relationPickerSearchFilterState,
+  const setRelationPickerPreselectedId = useSetRecoilState(
+    relationPickerPreselectedIdState,
   );
 
-  const [relationPickerPreselectedId, setRelationPickerPreselectedId] =
-    useRecoilState(relationPickerPreselectedIdState);
-
   return {
-    scopeId,
-    setSearchQuery,
     setRelationPickerSearchFilter,
-    relationPickerPreselectedId,
     setRelationPickerPreselectedId,
-    relationPickerSearchFilter,
   };
 };