From 1bba04dc8f2e14c929281a1a3d6018fa70cb0db9 Mon Sep 17 00:00:00 2001
From: MartinSchoeler <martinschoeler8@gmail.com>
Date: Mon, 15 Dec 2025 14:18:45 -0300
Subject: [PATCH 1/5] chore(ABAC): refactor room form autocompletes

---
 .../admin/ABAC/ABACRoomsTab/RoomForm.tsx      |  16 +--
 .../RoomFormAttributeField.spec.tsx           |  30 ----
 .../RoomFormAttributeField.stories.tsx        |  14 +-
 .../ABACRoomsTab/RoomFormAttributeField.tsx   |  32 ++---
 .../RoomFormAttributeFields.spec.tsx          | 135 ++++++++++++++++++
 .../ABACRoomsTab/RoomFormAttributeFields.tsx  |  37 +++++
 .../RoomFormAttributeField.spec.tsx.snap      |   8 +-
 .../admin/ABAC/hooks/useAttributeList.ts      |   2 +-
 apps/meteor/ee/server/api/abac/schemas.ts     |   2 +-
 9 files changed, 198 insertions(+), 78 deletions(-)
 create mode 100644 apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.spec.tsx
 create mode 100644 apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.tsx

diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomForm.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomForm.tsx
index 58c4ea1b39614..ca427d377ea33 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomForm.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomForm.tsx
@@ -7,7 +7,7 @@ import { useId } from 'react';
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
-import RoomFormAttributeField from './RoomFormAttributeField';
+import RoomFormAttributeFields from './RoomFormAttributeFields';
 import RoomFormAutocomplete from './RoomFormAutocomplete';
 import RoomFormAutocompleteDummy from './RoomFormAutocompleteDummy';
 
@@ -104,19 +104,7 @@ const RoomForm = ({ onClose, onSave, roomInfo, setSelectedRoomLabel }: RoomFormP
 						</FieldRow>
 						{errors.room && <FieldError>{errors.room.message}</FieldError>}
 					</Field>
-					{fields.map((field, index) => (
-						<Field key={field.id} mb={16}>
-							<FieldLabel htmlFor={field.id} required>
-								{t('Attribute')}
-							</FieldLabel>
-							<RoomFormAttributeField
-								onRemove={() => {
-									remove(index);
-								}}
-								index={index}
-							/>
-						</Field>
-					))}
+					<RoomFormAttributeFields fields={fields} remove={remove} />
 					<Button
 						w='full'
 						disabled={fields.length >= 10}
diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.spec.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.spec.tsx
index 55695ef031f75..b8c3cd71c1764 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.spec.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.spec.tsx
@@ -3,37 +3,7 @@ import { render } from '@testing-library/react';
 
 import * as stories from './RoomFormAttributeField.stories';
 
-const mockAttribute1 = {
-	_id: 'attr1',
-	key: 'Department',
-	label: 'Department',
-	values: ['Engineering', 'Sales', 'Marketing'],
-};
-
-const mockAttribute2 = {
-	_id: 'attr2',
-	key: 'Security-Level',
-	label: 'Security Level',
-	values: ['Public', 'Internal', 'Confidential'],
-};
-
-const mockAttribute3 = {
-	_id: 'attr3',
-	key: 'Location',
-	label: 'Location',
-	values: ['US', 'EU', 'APAC'],
-};
-
-jest.mock('../hooks/useAttributeList', () => ({
-	useAttributeList: jest.fn(() => ({
-		data: [mockAttribute1, mockAttribute2, mockAttribute3],
-		fetchNextPage: jest.fn(),
-		isLoading: false,
-	})),
-}));
-
 describe('RoomFormAttributeField', () => {
-	// TODO: Once the autocomplete components are a11y compliant, and testable, add more tests
 	const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
 
 	test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.stories.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.stories.tsx
index ad1f9cda7dc71..00f42f3232059 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.stories.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.stories.tsx
@@ -35,14 +35,7 @@ const meta: Meta<typeof RoomFormAttributeField> = {
 	},
 	decorators: [
 		(Story) => {
-			const AppRoot = mockAppRoot()
-				.withEndpoint('GET', '/v1/abac/attributes', () => ({
-					attributes: [mockAttribute1, mockAttribute2, mockAttribute3],
-					count: 3,
-					offset: 0,
-					total: 3,
-				}))
-				.build();
+			const AppRoot = mockAppRoot().build();
 
 			const methods = useForm<RoomFormData>({
 				defaultValues: {
@@ -65,6 +58,11 @@ const meta: Meta<typeof RoomFormAttributeField> = {
 	],
 	args: {
 		onRemove: action('onRemove'),
+		attributeList: [
+			{ value: mockAttribute1.key, label: mockAttribute1.key, attributeValues: mockAttribute1.values },
+			{ value: mockAttribute2.key, label: mockAttribute2.key, attributeValues: mockAttribute2.values },
+			{ value: mockAttribute3.key, label: mockAttribute3.key, attributeValues: mockAttribute3.values },
+		],
 		index: 0,
 	},
 };
diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.tsx
index 8e63e492a537a..101aa3ecf66b4 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.tsx
@@ -1,25 +1,23 @@
-import { Box, Button, FieldError, FieldRow, InputBoxSkeleton, MultiSelect, PaginatedSelectFiltered } from '@rocket.chat/fuselage';
-import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import { useCallback, useMemo, useState } from 'react';
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { Box, Button, FieldError, FieldRow, MultiSelect, SelectFiltered } from '@rocket.chat/fuselage';
+import { useCallback, useMemo } from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import type { RoomFormData } from './RoomForm';
-import { useAttributeList } from '../hooks/useAttributeList';
 
 type ABACAttributeAutocompleteProps = {
 	onRemove: () => void;
 	index: number;
+	attributeList: { value: string; label: string; attributeValues: string[] }[];
 };
 
-const RoomFormAttributeField = ({ onRemove, index }: ABACAttributeAutocompleteProps) => {
+const RoomFormAttributeField = ({ onRemove, index, attributeList }: ABACAttributeAutocompleteProps) => {
 	const { t } = useTranslation();
-	const [filter, setFilter] = useState<string>();
-	const filterDebounced = useDebouncedValue(filter, 300);
 
-	const { control, getValues, resetField } = useFormContext<RoomFormData>();
+	const { control, getValues } = useFormContext<RoomFormData>();
 
-	const { data: options, fetchNextPage, isLoading } = useAttributeList(filterDebounced || undefined);
+	const options: SelectOption[] = useMemo(() => attributeList.map((attribute) => [attribute.value, attribute.label]), [attributeList]);
 
 	const validateRepeatedAttributes = useCallback(
 		(value: string) => {
@@ -51,27 +49,17 @@ const RoomFormAttributeField = ({ onRemove, index }: ABACAttributeAutocompletePr
 			return [];
 		}
 
-		const selectedAttributeData = options.find((option) => option.value === keyField.value);
+		const selectedAttributeData = attributeList.find((option) => option.value === keyField.value);
 
 		return selectedAttributeData?.attributeValues.map((value) => [value, value]) || [];
-	}, [keyField.value, options]);
+	}, [attributeList, keyField.value]);
 
-	if (isLoading) {
-		return <InputBoxSkeleton />;
-	}
 	return (
 		<Box display='flex' flexDirection='column' w='full'>
 			<FieldRow>
-				<PaginatedSelectFiltered
+				<SelectFiltered
 					{...keyField}
-					onChange={(val) => {
-						resetField(`attributes.${index}.values`);
-						keyField.onChange(val);
-					}}
-					filter={filter}
-					setFilter={setFilter as (value: string | number | undefined) => void}
 					options={options}
-					endReached={() => fetchNextPage()}
 					placeholder={t('ABAC_Search_Attribute')}
 					mbe={4}
 					error={keyFieldState.error?.message}
diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.spec.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.spec.tsx
new file mode 100644
index 0000000000000..0b50e7be50400
--- /dev/null
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.spec.tsx
@@ -0,0 +1,135 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import type { RoomFormData } from './RoomForm';
+import RoomFormAttributeFields from './RoomFormAttributeFields';
+
+const mockAttribute1 = {
+	_id: 'attr1',
+	key: 'Department',
+	values: ['Engineering', 'Sales', 'Marketing'],
+};
+
+const mockAttribute2 = {
+	_id: 'attr2',
+	key: 'Security-Level',
+	values: ['Public', 'Internal', 'Confidential'],
+};
+
+const mockAttribute3 = {
+	_id: 'attr3',
+	key: 'Location',
+	values: ['US', 'EU', 'APAC'],
+};
+
+jest.mock('../hooks/useAttributeList', () => ({
+	useAttributeList: jest.fn(() => ({
+		data: [
+			{ value: mockAttribute1.key, label: mockAttribute1.key, attributeValues: mockAttribute1.values },
+			{ value: mockAttribute2.key, label: mockAttribute2.key, attributeValues: mockAttribute2.values },
+			{ value: mockAttribute3.key, label: mockAttribute3.key, attributeValues: mockAttribute3.values },
+		],
+		fetchNextPage: jest.fn(),
+		isLoading: false,
+	})),
+}));
+
+const appRoot = mockAppRoot()
+	.withTranslations('en', 'core', {
+		Attribute: 'Attribute',
+		ABAC_Search_Attribute: 'Search attribute',
+		ABAC_Select_Attribute_Values: 'Select attribute values',
+		Remove: 'Remove',
+	})
+	.build();
+
+const FormProviderWrapper = ({ children, defaultValues }: { children: ReactNode; defaultValues?: Partial<RoomFormData> }) => {
+	const methods = useForm<RoomFormData>({
+		defaultValues: {
+			room: '',
+			attributes: [{ key: '', values: [] }],
+			...defaultValues,
+		},
+		mode: 'onChange',
+	});
+
+	return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+describe('RoomFormAttributeFields', () => {
+	const mockRemove = jest.fn();
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should render the correct number of fields', () => {
+		const fields = [{ id: 'field-1' }, { id: 'field-2' }, { id: 'field-3' }];
+
+		render(
+			<FormProviderWrapper>
+				<RoomFormAttributeFields fields={fields} remove={mockRemove} />
+			</FormProviderWrapper>,
+			{ wrapper: appRoot },
+		);
+
+		const attributeLabels = screen.getAllByText('Attribute');
+		expect(attributeLabels).toHaveLength(3);
+	});
+
+	it('should render a single field', () => {
+		const fields = [{ id: 'field-1' }];
+
+		render(
+			<FormProviderWrapper>
+				<RoomFormAttributeFields fields={fields} remove={mockRemove} />
+			</FormProviderWrapper>,
+			{ wrapper: appRoot },
+		);
+
+		const attributeLabels = screen.getAllByText('Attribute');
+		expect(attributeLabels).toHaveLength(1);
+	});
+
+	it('should render multiple fields', () => {
+		const fields = [{ id: 'field-1' }, { id: 'field-2' }, { id: 'field-3' }, { id: 'field-4' }, { id: 'field-5' }];
+
+		render(
+			<FormProviderWrapper>
+				<RoomFormAttributeFields fields={fields} remove={mockRemove} />
+			</FormProviderWrapper>,
+			{ wrapper: appRoot },
+		);
+
+		const attributeLabels = screen.getAllByText('Attribute');
+		expect(attributeLabels).toHaveLength(5);
+	});
+
+	it('should render fields with provided default values', () => {
+		const fields = [{ id: 'field-1' }, { id: 'field-2' }];
+
+		render(
+			<FormProviderWrapper
+				defaultValues={{
+					attributes: [
+						{ key: 'Department', values: ['Engineering'] },
+						{ key: 'Security-Level', values: ['Public', 'Internal'] },
+					],
+				}}
+			>
+				<RoomFormAttributeFields fields={fields} remove={mockRemove} />
+			</FormProviderWrapper>,
+			{ wrapper: appRoot },
+		);
+
+		const attributeLabels = screen.getAllByText('Attribute');
+		expect(attributeLabels).toHaveLength(2);
+		expect(screen.getByText('Department')).toBeInTheDocument();
+		expect(screen.getByText('Engineering')).toBeInTheDocument();
+		expect(screen.getByText('Security-Level')).toBeInTheDocument();
+		expect(screen.getByText('Public')).toBeInTheDocument();
+		expect(screen.getByText('Internal')).toBeInTheDocument();
+	});
+});
diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.tsx
new file mode 100644
index 0000000000000..4fb0d63541bda
--- /dev/null
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.tsx
@@ -0,0 +1,37 @@
+import { Field, FieldLabel, InputBoxSkeleton } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+import RoomFormAttributeField from './RoomFormAttributeField';
+import { useAttributeList } from '../hooks/useAttributeList';
+
+type RoomFormAttributeFieldsProps = {
+	fields: { id: string }[];
+	remove: (index: number) => void;
+};
+
+const RoomFormAttributeFields = ({ fields, remove }: RoomFormAttributeFieldsProps) => {
+	const { t } = useTranslation();
+
+	const { data: attributeList, isLoading } = useAttributeList();
+
+	if (isLoading || !attributeList) {
+		return <InputBoxSkeleton />;
+	}
+
+	return fields.map((field, index) => (
+		<Field key={field.id} mb={16}>
+			<FieldLabel htmlFor={field.id} required>
+				{t('Attribute')}
+			</FieldLabel>
+			<RoomFormAttributeField
+				attributeList={attributeList}
+				onRemove={() => {
+					remove(index);
+				}}
+				index={index}
+			/>
+		</Field>
+	));
+};
+
+export default RoomFormAttributeFields;
diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/__snapshots__/RoomFormAttributeField.spec.tsx.snap b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/__snapshots__/RoomFormAttributeField.spec.tsx.snap
index de31c45c5e177..3495a43b53f61 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/__snapshots__/RoomFormAttributeField.spec.tsx.snap
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/__snapshots__/RoomFormAttributeField.spec.tsx.snap
@@ -17,10 +17,14 @@ exports[`RoomFormAttributeField renders Default without crashing 1`] = `
             name="attributes.0.key"
           >
             <div
-              class="rcx-box rcx-box--full rcx-select__wrapper rcx-css-bpb89k"
+              class="rcx-box rcx-box--full rcx-select__wrapper--hidden rcx-select__wrapper rcx-css-bpb89k"
             >
+              <span
+                class="rcx-box rcx-box--full rcx-select__item rcx-css-jmdrnf"
+              >
+                ABAC_Search_Attribute
+              </span>
               <input
-                aria-haspopup="listbox"
                 class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box rcx-select__focus rcx-css-1l0s473"
                 placeholder="ABAC_Search_Attribute"
                 value=""
diff --git a/apps/meteor/client/views/admin/ABAC/hooks/useAttributeList.ts b/apps/meteor/client/views/admin/ABAC/hooks/useAttributeList.ts
index 10d2221c73846..6254e917b2651 100644
--- a/apps/meteor/client/views/admin/ABAC/hooks/useAttributeList.ts
+++ b/apps/meteor/client/views/admin/ABAC/hooks/useAttributeList.ts
@@ -13,7 +13,7 @@ export const useAttributeList = (filter?: string) => {
 		queryKey: ABACQueryKeys.roomAttributes.list({ key: filter ?? '' }),
 		queryFn: async ({ pageParam: offset = 0 }) => {
 			// TODO: Check endpoint types
-			const { attributes, ...data } = await attributesAutoCompleteEndpoint({ key: filter, offset, count: 15 });
+			const { attributes, ...data } = await attributesAutoCompleteEndpoint({ key: filter, offset });
 
 			return {
 				...data,
diff --git a/apps/meteor/ee/server/api/abac/schemas.ts b/apps/meteor/ee/server/api/abac/schemas.ts
index 85fea475f619c..0d679293fcc81 100644
--- a/apps/meteor/ee/server/api/abac/schemas.ts
+++ b/apps/meteor/ee/server/api/abac/schemas.ts
@@ -64,7 +64,7 @@ const GetAbacAttributesQuery = {
 	additionalProperties: false,
 };
 
-export const GETAbacAttributesQuerySchema = ajv.compile<{ key?: string; values?: string; offset: number; count: number }>(
+export const GETAbacAttributesQuerySchema = ajv.compile<{ key?: string; values?: string; offset: number; count?: number }>(
 	GetAbacAttributesQuery,
 );
 

From c65b1f95cc91e02351c53b4973d3ad831aae6674 Mon Sep 17 00:00:00 2001
From: MartinSchoeler <martinschoeler8@gmail.com>
Date: Mon, 15 Dec 2025 14:59:32 -0300
Subject: [PATCH 2/5] fix: reset values when attribute change

---
 .../admin/ABAC/ABACRoomsTab/RoomFormAttributeField.tsx      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.tsx
index 101aa3ecf66b4..d9a4247c3db55 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.tsx
@@ -15,7 +15,7 @@ type ABACAttributeAutocompleteProps = {
 const RoomFormAttributeField = ({ onRemove, index, attributeList }: ABACAttributeAutocompleteProps) => {
 	const { t } = useTranslation();
 
-	const { control, getValues } = useFormContext<RoomFormData>();
+	const { control, getValues, resetField } = useFormContext<RoomFormData>();
 
 	const options: SelectOption[] = useMemo(() => attributeList.map((attribute) => [attribute.value, attribute.label]), [attributeList]);
 
@@ -64,6 +64,10 @@ const RoomFormAttributeField = ({ onRemove, index, attributeList }: ABACAttribut
 					mbe={4}
 					error={keyFieldState.error?.message}
 					withTruncatedText
+					onChange={(value) => {
+						keyField.onChange(value);
+						resetField(`attributes.${index}.values`, { defaultValue: [] });
+					}}
 				/>
 			</FieldRow>
 			{keyFieldState.error && <FieldError>{keyFieldState.error.message}</FieldError>}

From 6b3100a4f9e02fb47d6a4d7a726209b54a98964c Mon Sep 17 00:00:00 2001
From: MartinSchoeler <martinschoeler8@gmail.com>
Date: Tue, 16 Dec 2025 14:35:29 -0300
Subject: [PATCH 3/5] .. changes to attributeList hook

---
 .../ABACRoomsTab/RoomFormAttributeFields.tsx  |  2 +-
 .../admin/ABAC/hooks/useAttributeList.ts      | 67 +++++++++++--------
 2 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.tsx
index 4fb0d63541bda..bfcdf21464b28 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.tsx
@@ -24,7 +24,7 @@ const RoomFormAttributeFields = ({ fields, remove }: RoomFormAttributeFieldsProp
 				{t('Attribute')}
 			</FieldLabel>
 			<RoomFormAttributeField
-				attributeList={attributeList}
+				attributeList={attributeList.attributes}
 				onRemove={() => {
 					remove(index);
 				}}
diff --git a/apps/meteor/client/views/admin/ABAC/hooks/useAttributeList.ts b/apps/meteor/client/views/admin/ABAC/hooks/useAttributeList.ts
index 6254e917b2651..63ee1057ebb50 100644
--- a/apps/meteor/client/views/admin/ABAC/hooks/useAttributeList.ts
+++ b/apps/meteor/client/views/admin/ABAC/hooks/useAttributeList.ts
@@ -1,39 +1,52 @@
 import { useEndpoint } from '@rocket.chat/ui-contexts';
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { useIsABACAvailable } from './useIsABACAvailable';
 import { ABACQueryKeys } from '../../../../lib/queryKeys';
 
-export const useAttributeList = (filter?: string) => {
+const COUNT = 150;
+
+export const useAttributeList = () => {
 	const attributesAutoCompleteEndpoint = useEndpoint('GET', '/v1/abac/attributes');
 	const isABACAvailable = useIsABACAvailable();
 
-	return useInfiniteQuery({
+	return useQuery({
 		enabled: isABACAvailable,
-		queryKey: ABACQueryKeys.roomAttributes.list({ key: filter ?? '' }),
-		queryFn: async ({ pageParam: offset = 0 }) => {
-			// TODO: Check endpoint types
-			const { attributes, ...data } = await attributesAutoCompleteEndpoint({ key: filter, offset });
-
-			return {
-				...data,
-				attributes: attributes.map((attribute) => ({
-					_id: attribute._id,
-					label: attribute.key,
-					value: attribute.key,
-					attributeValues: attribute.values,
-				})),
-			};
-		},
-		select: (data) => data.pages.flatMap((page) => page.attributes),
-		initialPageParam: 0,
-		getNextPageParam: (lastPage) => {
-			const offset = lastPage.offset + lastPage.count;
-			return offset < lastPage.total ? offset : undefined;
+		queryKey: ABACQueryKeys.roomAttributes.list(),
+		queryFn: async () => {
+			const firstPage = await attributesAutoCompleteEndpoint({ offset: 0, count: COUNT });
+			const { attributes: firstPageAttributes, total, count } = firstPage;
+
+			// If there's only one page, return it
+			if (total <= count) {
+				return {
+					...firstPage,
+					attributes: firstPageAttributes.map((attribute) => ({
+						_id: attribute._id,
+						label: attribute.key,
+						value: attribute.key,
+						attributeValues: attribute.values,
+					})),
+				};
+			}
+
+			const remainingOffsets: number[] = [];
+			for (let currentOffset = count; currentOffset < total; currentOffset += count) {
+				remainingOffsets.push(currentOffset);
+			}
+
+			const remainingPages = await Promise.all(
+				remainingOffsets.map((pageOffset) => attributesAutoCompleteEndpoint({ offset: pageOffset, count: COUNT })),
+			);
+
+			const allAttributes = [...firstPageAttributes, ...remainingPages.flatMap((page) => page.attributes)].map((attribute) => ({
+				_id: attribute._id,
+				label: attribute.key,
+				value: attribute.key,
+				attributeValues: attribute.values,
+			}));
+
+			return { attributes: allAttributes };
 		},
-		initialData: () => ({
-			pages: [{ attributes: [], offset: 0, count: 0, total: Infinity }],
-			pageParams: [0],
-		}),
 	});
 };

From 3cf53f60b8fc03993e9f22333d8107ecf8439a8c Mon Sep 17 00:00:00 2001
From: MartinSchoeler <martinschoeler8@gmail.com>
Date: Tue, 16 Dec 2025 17:25:48 -0300
Subject: [PATCH 4/5] chore: refactor to make it shorter

---
 .../admin/ABAC/hooks/useAttributeList.ts      | 45 +++++++------------
 1 file changed, 16 insertions(+), 29 deletions(-)

diff --git a/apps/meteor/client/views/admin/ABAC/hooks/useAttributeList.ts b/apps/meteor/client/views/admin/ABAC/hooks/useAttributeList.ts
index 63ee1057ebb50..d17fac26ea532 100644
--- a/apps/meteor/client/views/admin/ABAC/hooks/useAttributeList.ts
+++ b/apps/meteor/client/views/admin/ABAC/hooks/useAttributeList.ts
@@ -15,38 +15,25 @@ export const useAttributeList = () => {
 		queryKey: ABACQueryKeys.roomAttributes.list(),
 		queryFn: async () => {
 			const firstPage = await attributesAutoCompleteEndpoint({ offset: 0, count: COUNT });
-			const { attributes: firstPageAttributes, total, count } = firstPage;
+			const { attributes: firstPageAttributes, total } = firstPage;
 
-			// If there's only one page, return it
-			if (total <= count) {
-				return {
-					...firstPage,
-					attributes: firstPageAttributes.map((attribute) => ({
-						_id: attribute._id,
-						label: attribute.key,
-						value: attribute.key,
-						attributeValues: attribute.values,
-					})),
-				};
-			}
+			let currentPage = COUNT;
+			const pages = [];
 
-			const remainingOffsets: number[] = [];
-			for (let currentOffset = count; currentOffset < total; currentOffset += count) {
-				remainingOffsets.push(currentOffset);
+			while (currentPage < total) {
+				pages.push(attributesAutoCompleteEndpoint({ offset: currentPage, count: COUNT }));
+				currentPage += COUNT;
 			}
-
-			const remainingPages = await Promise.all(
-				remainingOffsets.map((pageOffset) => attributesAutoCompleteEndpoint({ offset: pageOffset, count: COUNT })),
-			);
-
-			const allAttributes = [...firstPageAttributes, ...remainingPages.flatMap((page) => page.attributes)].map((attribute) => ({
-				_id: attribute._id,
-				label: attribute.key,
-				value: attribute.key,
-				attributeValues: attribute.values,
-			}));
-
-			return { attributes: allAttributes };
+			const remainingPages = await Promise.all(pages);
+
+			return {
+				attributes: [...firstPageAttributes, ...remainingPages.flatMap((page) => page.attributes)].map((attribute) => ({
+					_id: attribute._id,
+					label: attribute.key,
+					value: attribute.key,
+					attributeValues: attribute.values,
+				})),
+			};
 		},
 	});
 };

From 4c06789cd9036c6a7f047a51eaf68f6d3cb2cd75 Mon Sep 17 00:00:00 2001
From: MartinSchoeler <martinschoeler8@gmail.com>
Date: Tue, 16 Dec 2025 17:40:00 -0300
Subject: [PATCH 5/5] test: fix tests

---
 .../ABACRoomsTab/RoomFormAttributeFields.spec.tsx   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.spec.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.spec.tsx
index 0b50e7be50400..5f585e3099ed7 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.spec.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.spec.tsx
@@ -26,12 +26,13 @@ const mockAttribute3 = {
 
 jest.mock('../hooks/useAttributeList', () => ({
 	useAttributeList: jest.fn(() => ({
-		data: [
-			{ value: mockAttribute1.key, label: mockAttribute1.key, attributeValues: mockAttribute1.values },
-			{ value: mockAttribute2.key, label: mockAttribute2.key, attributeValues: mockAttribute2.values },
-			{ value: mockAttribute3.key, label: mockAttribute3.key, attributeValues: mockAttribute3.values },
-		],
-		fetchNextPage: jest.fn(),
+		data: {
+			attributes: [
+				{ value: mockAttribute1.key, label: mockAttribute1.key, attributeValues: mockAttribute1.values },
+				{ value: mockAttribute2.key, label: mockAttribute2.key, attributeValues: mockAttribute2.values },
+				{ value: mockAttribute3.key, label: mockAttribute3.key, attributeValues: mockAttribute3.values },
+			],
+		},
 		isLoading: false,
 	})),
 }));