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