From 60349d0989074d182836a51b0908ae36f459d893 Mon Sep 17 00:00:00 2001
From: Marie <51697796+ijreilly@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:55:21 +0100
Subject: [PATCH] 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.
---
 .../components/RelationPicker.tsx             | 45 +++++++++----------
 .../SearchPickerInitialValueEffect.tsx        | 25 +++++++++++
 .../hooks/useRelationPicker.ts                | 26 +++--------
 3 files changed, 54 insertions(+), 42 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/object-record/relation-picker/components/SearchPickerInitialValueEffect.tsx

diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/RelationPicker.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/RelationPicker.tsx
index af551f488..fb6293418 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/RelationPicker.tsx
+++ b/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}
+      />
+    </>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SearchPickerInitialValueEffect.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SearchPickerInitialValueEffect.tsx
new file mode 100644
index 000000000..284de747c
--- /dev/null
+++ b/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 <></>;
+};
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 3e74f0eda..50c00b150 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, 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,
   };
 };