diff --git a/packages/vkui/src/components/ChipsSelect/ChipsSelect.test.tsx b/packages/vkui/src/components/ChipsSelect/ChipsSelect.test.tsx
index 5b9b8865f6..d355958987 100644
--- a/packages/vkui/src/components/ChipsSelect/ChipsSelect.test.tsx
+++ b/packages/vkui/src/components/ChipsSelect/ChipsSelect.test.tsx
@@ -70,6 +70,38 @@ describe('ChipsSelect', () => {
expect(within(dropdownLocator).getByRole('option', { name: 'Синий' })).toBeTruthy();
});
+ it('should sort options by sortFn prop', async () => {
+ type Option = { label: string; value: number };
+ const options: Option[] = [
+ { label: '1', value: 1 },
+ { label: '3', value: 3 },
+ { label: '2', value: 2 },
+ ];
+ const byAsc = (a: Option, b: Option) => a.label.localeCompare(b.label);
+ const byDesc = (a: Option, b: Option) => b.label.localeCompare(a.label);
+
+ const checkOptionsOrder = async (order: string[]) => {
+ await userEvent.click(screen.getByRole('combobox'));
+ const dropdownLocator = screen.getByTestId('dropdown');
+ const optionsValues = within(dropdownLocator)
+ .getAllByRole('option')
+ .map((element) => element.textContent);
+ expect(optionsValues).toEqual(order);
+ };
+
+ // Сортируем по возрастанию
+ const { rerender } = render(
+ ,
+ );
+ await checkOptionsOrder(['1', '2', '3']);
+
+ // Сортируем по убыванию
+ rerender(
+ ,
+ );
+ await checkOptionsOrder(['3', '2', '1']);
+ });
+
it('shows spinner if fetching', async () => {
const result = render();
await userEvent.click(result.getByRole('combobox'));
diff --git a/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx b/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx
index 3556c88775..614e9d195c 100644
--- a/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx
+++ b/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx
@@ -161,6 +161,7 @@ export const ChipsSelect =