diff --git a/.changeset/rotten-pianos-serve.md b/.changeset/rotten-pianos-serve.md
new file mode 100644
index 0000000000000..7a1efa499899b
--- /dev/null
+++ b/.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
diff --git a/apps/meteor/client/components/AutoCompleteDepartmentMultiple.spec.tsx b/apps/meteor/client/components/AutoCompleteDepartmentMultiple.spec.tsx
new file mode 100644
index 0000000000000..a66f0789b79a6
--- /dev/null
+++ b/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) => (
+ {children}
+ ));
+
+it('should render autocomplete with checkbox', async () => {
+ mockGetDepartments.mockResolvedValueOnce({
+ departments: [createFakeDepartment({ name: 'Test Department' })],
+ count: 1,
+ offset: 0,
+ total: 1,
+ });
+
+ render(, { 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(, { 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();
+ });
+});
diff --git a/apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx b/apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx
index 43c7e096e3db0..b6ae590e3f76d 100644
--- a/apps/meteor/client/components/AutoCompleteDepartmentMultiple.tsx
+++ b/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): ReactElement => {
if (withCheckbox) {
- {label}}
- selected={value ? selectedValues.has(value) : false}
- />;
+ return (
+ {label}}
+ selected={value ? selectedValues.has(value) : false}
+ />
+ );
}
return ;
diff --git a/apps/meteor/client/omnichannel/additionalForms/BusinessHoursMultiple.tsx b/apps/meteor/client/omnichannel/additionalForms/BusinessHoursMultiple.tsx
index 77c2fbe548210..ded69ebb896fc 100644
--- a/apps/meteor/client/omnichannel/additionalForms/BusinessHoursMultiple.tsx
+++ b/apps/meteor/client/omnichannel/additionalForms/BusinessHoursMultiple.tsx
@@ -62,6 +62,7 @@ const BusinessHoursMultiple = ({ className }: { className?: ComponentProps (
{
}
+ render={({ field }) => }
/>
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatsFiltersContextualBar.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatsFiltersContextualBar.tsx
index e332c55f0fd5b..f50112bb1077e 100644
--- a/apps/meteor/client/views/omnichannel/directory/chats/ChatsFiltersContextualBar.tsx
+++ b/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 } }) => (
-
+
)}
/>