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 (
-
+ <>
+
+
+ >
);
};
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,
};
};