Regression: Fix slash command with preview (#28127)

apps/meteor/app/ui-message/client/popup/components/composerBoxPopupPreview/ComposerBoxPopupPreview.tsx

@@ -10,7 +10,7 @@ type ComposerBoxPopupPreviewItem = { _id: string; type: 'image' | 'video' | 'aud
 
 const ComposerBoxPopupPreview = forwardRef<
 	| {
-			getFilter: () => unknown;
+			getFilter?: () => unknown;
 			select?: (s: ComposerBoxPopupPreviewItem) => void;
 	  }
 	| undefined,
@@ -25,43 +25,46 @@ const ComposerBoxPopupPreview = forwardRef<
 	const executeSlashCommandPreviewMethod = useMethod('executeSlashCommandPreview');
 	useImperativeHandle(
 		ref,
-		() => ({
-			getFilter: () => {
-				const value = chat?.composer?.substring(0, chat?.composer?.selection.start);
-				if (!value) {
-					throw new Error('No value');
-				}
-				const matches = value.match(/(\/[\w\d\S]+ )([^]*)$/);
-
-				if (!matches) {
-					throw new Error('No matches');
-				}
-
-				const cmd = matches[1].replace('/', '').trim().toLowerCase();
-
-				const params = matches[2];
-				return { cmd, params, msg: { rid, tmid } };
-			},
-			select: (item) => {
-				const value = chat?.composer?.substring(0, chat?.composer?.selection.start);
-				if (!value) {
-					throw new Error('No value');
-				}
-				const matches = value.match(/(\/[\w\d\S]+ )([^]*)$/);
-
-				if (!matches) {
-					throw new Error('No matches');
-				}
-
-				const cmd = matches[1].replace('/', '').trim().toLowerCase();
-
-				const params = matches[2];
-				// TODO: Fix this solve the typing issue
-				executeSlashCommandPreviewMethod({ cmd, params, msg: { rid, tmid } }, { id: item._id, type: item.type, value: item.value });
-				chat?.composer?.setText('');
-			},
-		}),
-		[chat?.composer, executeSlashCommandPreviewMethod, rid, tmid],
+		() =>
+			suspended
+				? {}
+				: {
+						getFilter: () => {
+							const value = chat?.composer?.substring(0, chat?.composer?.selection.start);
+							if (!value) {
+								throw new Error('No value');
+							}
+							const matches = value.match(/(\/[\w\d\S]+ )([^]*)$/);
+
+							if (!matches) {
+								throw new Error('No matches');
+							}
+
+							const cmd = matches[1].replace('/', '').trim().toLowerCase();
+
+							const params = matches[2];
+							return { cmd, params, msg: { rid, tmid } };
+						},
+						select: (item) => {
+							const value = chat?.composer?.substring(0, chat?.composer?.selection.start);
+							if (!value) {
+								throw new Error('No value');
+							}
+							const matches = value.match(/(\/[\w\d\S]+ )([^]*)$/);
+
+							if (!matches) {
+								throw new Error('No matches');
+							}
+
+							const cmd = matches[1].replace('/', '').trim().toLowerCase();
+
+							const params = matches[2];
+							// TODO: Fix this solve the typing issue
+							executeSlashCommandPreviewMethod({ cmd, params, msg: { rid, tmid } }, { id: item._id, type: item.type, value: item.value });
+							chat?.composer?.setText('');
+						},
+				  },
+		[chat?.composer, executeSlashCommandPreviewMethod, rid, tmid, suspended],
 	);
 
 	const itemsFlat = items

apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopup.ts

@@ -9,7 +9,7 @@ import { useComposerBoxPopupQueries } from './useComposerBoxPopupQueries';
 
 export type ComposerBoxPopupImperativeCommands<T> = MutableRefObject<
 	| {
-			getFilter: () => unknown;
+			getFilter?: () => unknown;
 			select?: (s: T) => void;
 	  }
 	| undefined
@@ -60,7 +60,10 @@ export const useComposerBoxPopup = <T extends { _id: string; sort?: number }>({
 
 	const commandsRef: ComposerBoxPopupImperativeCommands<T> = useRef();
 
-	const items = useComposerBoxPopupQueries(filter, popup) as unknown as UseQueryResult<T[]>[];
+	const { queries: items, suspended } = useComposerBoxPopupQueries(filter, popup) as {
+		queries: UseQueryResult<T[]>[];
+		suspended: boolean;
+	};
 
 	const chat = useChat();
 
@@ -135,7 +138,7 @@ export const useComposerBoxPopup = <T extends { _id: string; sort?: number }>({
 					? new RegExp(`(?:^| |\n)(${configuration.trigger})([^\\s]*$)`)
 					: new RegExp(`(?:^)(${configuration.trigger})([^\\s]*$)`));
 			const result = value.match(selector);
-			setFilter(commandsRef.current?.getFilter() ?? (result ? result[2] : ''));
+			setFilter(commandsRef.current?.getFilter?.() ?? (result ? result[2] : ''));
 		}
 		return configuration;
 	});
@@ -165,7 +168,7 @@ export const useComposerBoxPopup = <T extends { _id: string; sort?: number }>({
 	});
 
 	const keydown = useMutableCallback((event: KeyboardEvent) => {
-		if (!popup) {
+		if (!popup || popup.preview) {
 			return;
 		}
 
@@ -253,7 +256,7 @@ export const useComposerBoxPopup = <T extends { _id: string; sort?: number }>({
 		popup,
 		select,
 
-		suspended: items.every((item) => item.isLoading && item.fetchStatus === 'idle'),
+		suspended,
 
 		commandsRef,
 		callbackRef,

apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopupQueries.ts

@@ -18,25 +18,28 @@ export const useComposerBoxPopupQueries = <T extends { _id: string; sort?: numbe
 			Boolean(slashCommands.commands[(filter as any)?.cmd]) &&
 			slashCommands.commands[(filter as any)?.cmd].providesPreview);
 
-	return useQueries({
-		queries: [
-			popup?.getItemsFromLocal && {
-				keepPreviousData: true,
-				queryKey: ['message-popup', 'local', filter, popup],
-				queryFn: () => popup?.getItemsFromLocal && popup.getItemsFromLocal(filter),
-				onSuccess: (args: T[]) => {
-					if (args.length < 5) {
-						setCounter(1);
-					}
+	return {
+		queries: useQueries({
+			queries: [
+				popup?.getItemsFromLocal && {
+					keepPreviousData: true,
+					queryKey: ['message-popup', 'local', filter, popup],
+					queryFn: () => popup?.getItemsFromLocal && popup.getItemsFromLocal(filter),
+					onSuccess: (args: T[]) => {
+						if (args.length < 5) {
+							setCounter(1);
+						}
+					},
+					enabled: enableQuery,
 				},
-				enabled: enableQuery,
-			},
-			popup?.getItemsFromServer && {
-				keepPreviousData: true,
-				queryKey: ['message-popup', 'server', filter, popup],
-				queryFn: () => popup?.getItemsFromServer && popup.getItemsFromServer(filter),
-				enabled: counter > 0,
-			},
-		].filter(Boolean) as any,
-	}) as QueriesResults<T[]>;
+				popup?.getItemsFromServer && {
+					keepPreviousData: true,
+					queryKey: ['message-popup', 'server', filter, popup],
+					queryFn: () => popup?.getItemsFromServer && popup.getItemsFromServer(filter),
+					enabled: counter > 0,
+				},
+			].filter(Boolean) as any,
+		}) as QueriesResults<T[]>,
+		suspended: !enableQuery,
+	};
 };