fix: don't save the filter value on offlineMessageChannelName (#30576)

apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx

@@ -15,10 +15,10 @@ import {
 	Button,
 	PaginatedSelectFiltered,
 } from '@rocket.chat/fuselage';
-import { useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useDebouncedValue, useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useRoute, useMethod, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
 import { validateEmail } from '../../../../lib/emailValidator';
@@ -130,10 +130,13 @@ function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmen
 	} = useForm<FormValues>({ mode: 'onChange', defaultValues: initialValues });
 
 	const requestTagBeforeClosingChat = watch('requestTagBeforeClosingChat');
-	const offlineMessageChannelName = watch('offlineMessageChannelName');
+
+	const [fallbackFilter, setFallbackFilter] = useState<string>('');
+
+	const debouncedFallbackFilter = useDebouncedValue(fallbackFilter, 500);
 
 	const { itemsList: RoomsList, loadMoreItems: loadMoreRooms } = useRoomsList(
-		useMemo(() => ({ text: offlineMessageChannelName }), [offlineMessageChannelName]),
+		useMemo(() => ({ text: debouncedFallbackFilter }), [debouncedFallbackFilter]),
 	);
 
 	const { phase: roomsPhase, items: roomsItems, itemCount: roomsTotal } = useRecordList(RoomsList);
@@ -324,13 +327,14 @@ function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmen
 											value={value}
 											onChange={onChange}
 											flexShrink={0}
-											filter={value}
-											setFilter={onChange}
+											filter={fallbackFilter}
+											setFilter={setFallbackFilter as (value?: string | number) => void}
 											options={roomsItems}
 											placeholder={t('Channel_name')}
 											endReached={
 												roomsPhase === AsyncStatePhase.LOADING ? () => undefined : (start) => loadMoreRooms(start, Math.min(50, roomsTotal))
 											}
+											aria-busy={fallbackFilter !== debouncedFallbackFilter}
 										/>
 									)}
 								/>