fix: "Filter by room type" selectable in Rooms filter (#33507)

.changeset/tender-cheetahs-teach.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/ui-client': patch
+'@rocket.chat/meteor': patch
+---
+
+Fixed an issue where "Filter by room type" was selectable in the Rooms filter.

apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx

@@ -9,6 +9,7 @@ const initialRoomTypeFilterStructure = [
 	{
 		id: 'filter_by_room',
 		text: 'Filter_by_room',
+		isGroupTitle: true,
 	},
 	{
 		id: 'd',

packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx

@@ -24,6 +24,7 @@ export type OptionProp = {
 	id: string;
 	text: string;
 	checked?: boolean;
+	isGroupTitle?: boolean;
 };
 
 /**

packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.spec.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+
+import MultiSelectCustomList from './MultiSelectCustomList';
+
+it('should render options with correct checked state', () => {
+	render(
+		<MultiSelectCustomList
+			options={[
+				{ id: '1', text: 'Option 1', checked: true },
+				{ id: '2', text: 'Option 2', checked: false },
+			]}
+			onSelected={jest.fn()}
+		/>,
+		{ legacyRoot: true },
+	);
+
+	const option1 = screen.getByLabelText('Option 1');
+	expect(option1).toBeInTheDocument();
+	expect(option1).toBeChecked();
+
+	const option2 = screen.getByLabelText('Option 2');
+	expect(option2).toBeInTheDocument();
+	expect(option2).not.toBeChecked();
+});
+
+it('should not render group title as selectable option', () => {
+	render(
+		<MultiSelectCustomList
+			options={[
+				{ id: '1', text: 'Group title', isGroupTitle: true },
+				{ id: '2', text: 'Option 1', checked: false },
+			]}
+			onSelected={jest.fn()}
+		/>,
+		{ legacyRoot: true },
+	);
+
+	expect(screen.getByText('Group title')).toBeInTheDocument();
+	expect(screen.queryByRole('checkbox', { name: /Group title/i })).not.toBeInTheDocument();
+
+	const option1 = screen.getByLabelText('Option 1');
+	expect(option1).toBeInTheDocument();
+	expect(option1).not.toBeChecked();
+});

packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx

@@ -40,8 +40,8 @@ const MultiSelectCustomList = ({
 			)}
 			{filteredOptions.map((option) => (
 				<Fragment key={option.id}>
-					{!option.hasOwnProperty('checked') ? (
-						<Box mi={12} mb={4} fontScale='p2b' color='default'>
+					{option.isGroupTitle || !option.hasOwnProperty('checked') ? (
+						<Box mi='x10' mb={4} fontScale='p2b' color='default'>
 							{t(option.text as TranslationKey)}
 						</Box>
 					) : (