fix: AutoCompleteDepartmentMultiple withCheckbox property not working

.changeset/rotten-pianos-serve.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixes issue where department autocomplete did not render options with checkboxes when configured

apps/meteor/client/components/AutoCompleteDepartmentMultiple.spec.tsx

@@ -0,0 +1,50 @@
+import { MockedAppRootBuilder } from '@rocket.chat/mock-providers/dist/MockedAppRootBuilder';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { VirtuosoMockContext } from 'react-virtuoso';
+
+import AutoCompleteDepartmentMultiple from './AutoCompleteDepartmentMultiple';
+import { createFakeDepartment } from '../../tests/mocks/data';
+
+const mockGetDepartments = jest.fn();
+const appRoot = new MockedAppRootBuilder()
+	.withEndpoint('GET', '/v1/livechat/department', mockGetDepartments)
+	.wrap((children) => (
+		<VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 28 }}>{children}</VirtuosoMockContext.Provider>
+	));
+
+it('should render autocomplete with checkbox', async () => {
+	mockGetDepartments.mockResolvedValueOnce({
+		departments: [createFakeDepartment({ name: 'Test Department' })],
+		count: 1,
+		offset: 0,
+		total: 1,
+	});
+
+	render(<AutoCompleteDepartmentMultiple withCheckbox value={undefined} onChange={jest.fn()} />, { wrapper: appRoot.build() });
+
+	await userEvent.click(screen.getByRole('listbox'));
+
+	await waitFor(() => {
+		const checkbox = within(screen.getByRole('option', { name: 'Test Department' })).getByRole('checkbox');
+		expect(checkbox).toBeInTheDocument();
+	});
+});
+
+it('should render autocomplete without checkbox', async () => {
+	mockGetDepartments.mockResolvedValueOnce({
+		departments: [createFakeDepartment({ name: 'Test Department' })],
+		count: 1,
+		offset: 0,
+		total: 1,
+	});
+
+	render(<AutoCompleteDepartmentMultiple value={undefined} onChange={jest.fn()} />, { wrapper: appRoot.build() });
+
+	await userEvent.click(screen.getByRole('listbox'));
+
+	await waitFor(() => {
+		const checkbox = within(screen.getByRole('option', { name: 'Test Department' })).queryByRole('checkbox');
+		expect(checkbox).not.toBeInTheDocument();
+	});
+});

apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx

@@ -26,7 +26,7 @@ const AutoCompleteDepartmentMultiple = ({
 	onlyMyDepartments = false,
 	showArchived = false,
 	enabled = false,
-	withCheckbox = true,
+	withCheckbox = false,
 	excludeId,
 	unitId,
 	onChange = () => undefined,
@@ -55,11 +55,13 @@ const AutoCompleteDepartmentMultiple = ({
 
 	const renderItem = ({ label, value, ...props }: ComponentProps<typeof Option>): ReactElement => {
 		if (withCheckbox) {
-			<CheckOption
-				{...props}
-				label={<span style={{ whiteSpace: 'normal' }}>{label}</span>}
-				selected={value ? selectedValues.has(value) : false}
-			/>;
+			return (
+				<CheckOption
+					{...props}
+					label={<span style={{ whiteSpace: 'normal' }}>{label}</span>}
+					selected={value ? selectedValues.has(value) : false}
+				/>
+			);
 		}
 
 		return <Option {...props} label={label} />;

apps/meteor/client/omnichannel/additionalForms/BusinessHoursMultiple.tsx

@@ -62,6 +62,7 @@ const BusinessHoursMultiple = ({ className }: { className?: ComponentProps<typeo
 						control={control}
 						render={({ field: { value, onChange, name, onBlur } }) => (
 							<AutoCompleteDepartmentMultiple
+								withCheckbox
 								value={value}
 								onChange={onChange}
 								name={name}

apps/meteor/client/omnichannel/tags/TagEdit.tsx

@@ -113,7 +113,7 @@ const TagEdit = ({ tagData, currentDepartments }: TagEditProps) => {
 								<Controller
 									name='departments'
 									control={control}
-									render={({ field }) => <AutoCompleteDepartmentMultiple id={departmentsField} showArchived {...field} />}
+									render={({ field }) => <AutoCompleteDepartmentMultiple withCheckbox id={departmentsField} showArchived {...field} />}
 								/>
 							</FieldRow>
 						</Field>

apps/meteor/client/views/omnichannel/directory/chats/ChatsFiltersContextualBar.tsx

@@ -114,7 +114,7 @@ const ChatsFiltersContextualBar = ({ onClose }: ChatsFiltersContextualBarProps)
 							name='department'
 							control={control}
 							render={({ field: { value, onChange } }) => (
-								<AutoCompleteDepartmentMultiple showArchived value={value} onChange={onChange} onlyMyDepartments withCheckbox={false} />
+								<AutoCompleteDepartmentMultiple showArchived value={value} onChange={onChange} onlyMyDepartments />
 							)}
 						/>
 					</FieldRow>