diff --git a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerPerformSearch.ts b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerPerformSearch.ts index b880fd3bf3..584f7aeb29 100644 --- a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerPerformSearch.ts +++ b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerPerformSearch.ts @@ -9,6 +9,7 @@ import { multipleRecordPickerPickableMorphItemsComponentState } from '@/object-r import { multipleRecordPickerSearchFilterComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerSearchFilterComponentState'; import { multipleRecordPickerSearchableObjectMetadataItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerSearchableObjectMetadataItemsComponentState'; import { searchRecordStoreComponentFamilyState } from '@/object-record/record-picker/multiple-record-picker/states/searchRecordStoreComponentFamilyState'; +import { sortMorphItems } from '@/object-record/record-picker/multiple-record-picker/utils/sortMorphItems'; import { type RecordPickerPickableMorphItem } from '@/object-record/record-picker/types/RecordPickerPickableMorphItem'; import { getObjectPermissionsFromMapByObjectMetadataId } from '@/settings/roles/role-permissions/objects-permissions/utils/getObjectPermissionsFromMapByObjectMetadataId'; import { type ApolloClient } from '@apollo/client'; @@ -260,11 +261,16 @@ export const useMultipleRecordPickerPerformSearch = () => { ) : newMorphItems; + const sortedMorphItems = sortMorphItems(morphItems, [ + ...searchRecordsFilteredOnPickedRecords, + ...searchRecordsExcludingPickedRecords, + ]); + set( multipleRecordPickerPickableMorphItemsComponentState.atomFamily({ instanceId: multipleRecordPickerInstanceId, }), - morphItems, + sortedMorphItems, ); const searchRecords = [ diff --git a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/utils/sortMorphItems.ts b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/utils/sortMorphItems.ts new file mode 100644 index 0000000000..e32571f280 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/utils/sortMorphItems.ts @@ -0,0 +1,22 @@ +import { type RecordPickerPickableMorphItem } from '@/object-record/record-picker/types/RecordPickerPickableMorphItem'; +import { type SearchRecord } from '~/generated-metadata/graphql'; + +export const sortMorphItems = ( + morphItems: RecordPickerPickableMorphItem[], + searchRecords: SearchRecord[], +): RecordPickerPickableMorphItem[] => { + const indexByRecordId = new Map(); + searchRecords.forEach((record, index) => { + indexByRecordId.set(record.recordId, index); + }); + + return morphItems.sort((a, b) => { + if (a.isSelected && !b.isSelected) return -1; + if (!a.isSelected && b.isSelected) return 1; + + const aRank = indexByRecordId.get(a.recordId); + const bRank = indexByRecordId.get(b.recordId); + + return (aRank ?? -1) - (bRank ?? -1); + }); +};