fix: selected options not being displayed on `PaginatedMultiSelect` (#30470)

apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx

@@ -17,7 +17,7 @@ type AutoCompleteDepartmentMultipleProps = {
 };
 
 const AutoCompleteDepartmentMultiple = ({
-	value,
+	value = [],
 	onlyMyDepartments = false,
 	showArchived = false,
 	enabled = false,
@@ -37,6 +37,11 @@ const AutoCompleteDepartmentMultiple = ({
 
 	const { phase: departmentsPhase, items: departmentsItems, itemCount: departmentsTotal } = useRecordList(departmentsList);
 
+	const departmentOptions = useMemo(() => {
+		const pending = value.filter(({ value }) => !departmentsItems.find((dep) => dep.value === value)) || [];
+		return [...departmentsItems, ...pending];
+	}, [departmentsItems, value]);
+
 	return (
 		<PaginatedMultiSelectFiltered
 			withTitle
@@ -44,7 +49,7 @@ const AutoCompleteDepartmentMultiple = ({
 			onChange={onChange}
 			filter={departmentsFilter}
 			setFilter={setDepartmentsFilter}
-			options={departmentsItems}
+			options={departmentOptions}
 			width='100%'
 			flexShrink={0}
 			flexGrow={0}

apps/meteor/ee/client/hooks/useTagsList.ts

@@ -38,6 +38,7 @@ export const useTagsList = (options: TagsListOptions): UseTagsListResult => {
 				count: end + start,
 				...(viewAll && { viewAll: 'true' }),
 				...(department && { department }),
+				sort: JSON.stringify({ name: 1 }),
 			});
 
 			return {
@@ -45,7 +46,6 @@ export const useTagsList = (options: TagsListOptions): UseTagsListResult => {
 					_id: tag._id,
 					label: tag.name,
 					value: tag.name,
-					_updatedAt: new Date(tag._updatedAt),
 				})),
 				itemCount: total,
 			};

apps/meteor/ee/client/omnichannel/tags/AutoCompleteTagsMultiple.js

@@ -24,16 +24,10 @@ const AutoCompleteTagMultiple = (props) => {
 
 	const { phase: tagsPhase, items: tagsItems, itemCount: tagsTotal } = useRecordList(tagsList);
 
-	const sortedByName = tagsItems.sort((a, b) => {
-		if (a.name > b.name) {
-			return 1;
-		}
-		if (a.name < b.name) {
-			return -1;
-		}
-
-		return 0;
-	});
+	const tagsOptions = useMemo(() => {
+		const pending = value.filter(({ value }) => !tagsItems.find((tag) => tag.value === value));
+		return [...tagsItems, ...pending];
+	}, [tagsItems, value]);
 
 	return (
 		<PaginatedMultiSelectFiltered
@@ -42,7 +36,7 @@ const AutoCompleteTagMultiple = (props) => {
 			onChange={onChange}
 			filter={tagsFilter}
 			setFilter={setTagsFilter}
-			options={sortedByName}
+			options={tagsOptions}
 			width='100%'
 			flexShrink={0}
 			flexGrow={0}