admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix single picker dropdown search filter (#12688)

Browse Source 
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
This commit is contained in:
Lucas Bordeau
2025-06-17 17:44:29 +02:00
committed by GitHub
parent 0ae43f518d
commit 1d703bbf2b
1 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx
View File

@ -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,