[pull] develop from RocketChat:develop

apps/meteor/client/navbar/NavBarSearch/NavBarAISearch.spec.tsx

@@ -0,0 +1,44 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import NavBarAISearch from './NavBarAISearch';
+
+import '@testing-library/jest-dom';
+
+jest.mock('./NavBarAISearchListbox', () => () => null);
+jest.mock('./NavBarSearchListbox', () => () => null);
+jest.mock('tinykeys', () => ({ __esModule: true, default: () => jest.fn() }));
+jest.mock('./hooks/useNavBarAISearch', () => ({
+	useNavBarAISearch: () => ({
+		aiSearchActive: false,
+		canSearchWithAIFromTopBar: true,
+		appliedFilterChips: [],
+		aiSearchButtonTooltip: 'Search with AI',
+		handleRemoveFilter: jest.fn(),
+		handleToggleAISearch: jest.fn(),
+	}),
+}));
+
+describe('NavBarAISearch', () => {
+	it('clears the search text', async () => {
+		const user = userEvent.setup();
+		const wrapper = mockAppRoot()
+			.withTranslations('en', 'core', {
+				Clear: 'Clear',
+				Search_rooms: 'Search rooms',
+			})
+			.build();
+
+		render(<NavBarAISearch />, { wrapper });
+
+		const searchInput = screen.getByRole('combobox', { name: 'Search rooms' });
+		await user.type(searchInput, 'deployment errors');
+		expect(searchInput).toHaveValue('deployment errors');
+
+		await user.click(screen.getByRole('button', { name: 'Clear' }));
+
+		expect(searchInput).toHaveValue('');
+		expect(searchInput).toHaveFocus();
+	});
+});

apps/meteor/client/navbar/NavBarSearch/NavBarAISearch.tsx

@@ -24,15 +24,8 @@ const NavBarAISearch = () => {
 	const shortcut = getShortcutLabel();
 
 	const methods = useForm<NavBarSearchFormValues>({ defaultValues: { filterText: '', appliedFilters: emptySearchFilters() } });
-	const {
-		formState: { isDirty },
-		register,
-		reset,
-		setFocus,
-		setValue,
-		watch,
-	} = methods;
-	const { filterText, appliedFilters } = watch();
+	const { register, resetField, setFocus, setValue, watch } = methods;
+	const { filterText = '', appliedFilters = emptySearchFilters() } = watch();
 
 	const { ref: filterRef, ...rest } = register('filterText');
 
@@ -54,12 +47,13 @@ const NavBarAISearch = () => {
 	const placeholder = [searchLabel, shortcut].filter(Boolean).join(' ');
 
 	const handleEscSearch = useCallback(() => {
-		reset();
+		resetField('filterText');
+		setValue('appliedFilters', emptySearchFilters(), { shouldDirty: true });
 		state.close();
-	}, [reset, state]);
+	}, [resetField, setValue, state]);
 
 	const handleClearText = useStableCallback(() => {
-		reset();
+		resetField('filterText');
 		setFocus('filterText');
 	});
 
@@ -106,7 +100,7 @@ const NavBarAISearch = () => {
 							appliedFilterChips={appliedFilterChips}
 							aiSearchActive={aiSearchActive}
 							aiSearchButtonTooltip={aiSearchButtonTooltip}
-							isDirty={isDirty}
+							hasSearchText={Boolean(filterText)}
 							onClearText={handleClearText}
 							onRemoveFilter={handleRemoveFilter}
 							onToggleAISearch={handleToggleAISearch}

apps/meteor/client/navbar/NavBarSearch/NavBarAISearchListbox.tsx

@@ -1,6 +1,6 @@
 import type { OverlayTriggerAria } from '@react-aria/overlays';
 import type { OverlayTriggerState } from '@react-stately/overlays';
-import type { NavBarSearchFormValues } from '@rocket.chat/ai-search';
+import { emptySearchFilters, type NavBarSearchFormValues } from '@rocket.chat/ai-search';
 import { Tile } from '@rocket.chat/fuselage';
 import { useOutsideClick, useStableCallback } from '@rocket.chat/fuselage-hooks';
 import { CustomScrollbars } from '@rocket.chat/ui-client';
@@ -30,12 +30,13 @@ const NavBarAISearchListBox = ({ state, overlayProps, aiSearchActive, aiSearchAv
 	const handleKeyDown = useListboxNavigation(state);
 	useOutsideClick([containerRef], state.close);
 
-	const { reset, watch } = useFormContext<NavBarSearchFormValues>();
-	const { filterText, appliedFilters } = watch();
+	const { resetField, setValue, watch } = useFormContext<NavBarSearchFormValues>();
+	const { filterText = '', appliedFilters = emptySearchFilters() } = watch();
 
 	const handleSelect = useStableCallback(() => {
 		state.close();
-		reset();
+		resetField('filterText');
+		setValue('appliedFilters', emptySearchFilters(), { shouldDirty: true });
 	});
 
 	const { data: aiItems, isFetching } = useAISearchItems(filterText, appliedFilters, aiSearchActive);

apps/meteor/client/navbar/NavBarSearch/NavBarSearchFilterSuggestions.tsx

@@ -1,4 +1,5 @@
 import {
+	emptySearchFilters,
 	mergeSearchFilters,
 	parseSearchFilterText,
 	type NavBarSearchFormValues,
@@ -46,7 +47,8 @@ const NavBarSearchFilterSuggestions = ({ suggestions }: NavBarSearchFilterSugges
 			event.preventDefault();
 			event.stopPropagation();
 			const { searchText, filters } = parseSearchFilterText(value);
-			setValue('appliedFilters', mergeSearchFilters(getValues('appliedFilters'), filters), { shouldDirty: true });
+			const appliedFilters = getValues('appliedFilters') ?? emptySearchFilters();
+			setValue('appliedFilters', mergeSearchFilters(appliedFilters, filters), { shouldDirty: true });
 			setValue('filterText', searchText, { shouldDirty: true });
 			setFocus('filterText');
 		},

apps/meteor/client/navbar/NavBarSearch/NavBarSearchInputAddon.tsx

@@ -7,7 +7,7 @@ export type NavBarSearchInputAddonProps = {
 	appliedFilterChips: SearchFilterChip[];
 	aiSearchActive: boolean;
 	aiSearchButtonTooltip: string;
-	isDirty: boolean;
+	hasSearchText: boolean;
 	onClearText: () => void;
 	onRemoveFilter: (filterKey: string) => void;
 	onToggleAISearch: () => void;
@@ -18,7 +18,7 @@ const NavBarSearchInputAddon = ({
 	appliedFilterChips,
 	aiSearchActive,
 	aiSearchButtonTooltip,
-	isDirty,
+	hasSearchText,
 	onClearText,
 	onRemoveFilter,
 	onToggleAISearch,
@@ -45,7 +45,7 @@ const NavBarSearchInputAddon = ({
 				))}
 			</Box>
 		)}
-		{isDirty ? <IconButton mini icon='cross' aria-label={t('Clear')} onClick={onClearText} /> : <Icon name='magnifier' size='x20' />}
+		{hasSearchText ? <IconButton mini icon='cross' aria-label={t('Clear')} onClick={onClearText} /> : <Icon name='magnifier' size='x20' />}
 		<IconButton
 			mini
 			icon='stars'

apps/meteor/client/navbar/NavBarSearch/NavBarSearchIntelligentSection.tsx

@@ -1,4 +1,4 @@
-import { serializeSearchQuery, type NavBarSearchFormValues } from '@rocket.chat/ai-search';
+import { emptySearchFilters, serializeSearchQuery, type NavBarSearchFormValues } from '@rocket.chat/ai-search';
 import { Box, Icon, SidebarV2ItemIcon } from '@rocket.chat/fuselage';
 import type { AISearchResult } from '@rocket.chat/rest-typings';
 import { useRouter } from '@rocket.chat/ui-contexts';
@@ -19,7 +19,7 @@ const NavBarSearchIntelligentSection = ({ items, onSelect, onClose }: NavBarSear
 	const { t } = useTranslation();
 	const router = useRouter();
 	const { watch } = useFormContext<NavBarSearchFormValues>();
-	const { filterText, appliedFilters } = watch();
+	const { filterText = '', appliedFilters = emptySearchFilters() } = watch();
 
 	if (!items.length) {
 		return null;