From 1d703bbf2b305e39bac244c44c23b86eeb4af9e7 Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Tue, 17 Jun 2025 17:44:29 +0200
Subject: [PATCH] Fix single picker dropdown search filter (#12688)

This PR fixes the single record picker search filter that wasn't reset
on close, thus preventing from having the result of a previous search
when re-opening a single record picker.

Before :


https://github.com/user-attachments/assets/85a3a780-f010-4b63-8c86-2ed28202e9fd

After :



https://github.com/user-attachments/assets/2db082b5-add2-4952-b812-6a4f24cb3b26


Fixes https://github.com/twentyhq/twenty/issues/12667
---
 .../components/SingleRecordPicker.tsx         | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx
index dc50997aa..649088830 100644
--- a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx
@@ -5,9 +5,10 @@ import {
   SingleRecordPickerMenuItemsWithSearchProps,
 } from '@/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItemsWithSearch';
 import { SingleRecordPickerComponentInstanceContext } from '@/object-record/record-picker/single-record-picker/states/contexts/SingleRecordPickerComponentInstanceContext';
+import { singleRecordPickerSearchFilterComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSearchFilterComponentState';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
-import { isDefined } from 'twenty-shared/utils';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 
 export const SINGLE_RECORD_PICKER_LISTENER_ID = 'single-record-select';
 
@@ -30,6 +31,23 @@ export const SingleRecordPicker = ({
 }: SingleRecordPickerProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
+  const setRecordPickerSearchFilter = useSetRecoilComponentStateV2(
+    singleRecordPickerSearchFilterComponentState,
+    componentInstanceId,
+  );
+
+  const handleCancel = () => {
+    setRecordPickerSearchFilter('');
+
+    onCancel?.();
+  };
+
+  const handleCreateNew = (searchInput?: string | undefined) => {
+    onCreate?.(searchInput);
+
+    setRecordPickerSearchFilter('');
+  };
+
   useListenClickOutside({
     refs: [containerRef],
     callback: (event) => {
@@ -40,8 +58,8 @@ export const SingleRecordPicker = ({
         event.target.tagName === 'INPUT'
       );
 
-      if (weAreNotInAnHTMLInput && isDefined(onCancel)) {
-        onCancel();
+      if (weAreNotInAnHTMLInput) {
+        handleCancel();
       }
     },
     listenerId: SINGLE_RECORD_PICKER_LISTENER_ID,
@@ -57,8 +75,8 @@ export const SingleRecordPicker = ({
             EmptyIcon,
             emptyLabel,
             excludedRecordIds,
-            onCancel,
-            onCreate,
+            onCancel: handleCancel,
+            onCreate: handleCreateNew,
             onRecordSelected,
             objectNameSingular,
             layoutDirection,