diff --git a/packages/autocomplete/src/lib/AsyncAutocomplete.test.tsx b/packages/autocomplete/src/lib/AsyncAutocomplete.test.tsx
index 141eeb1ca..a0d0a1794 100644
--- a/packages/autocomplete/src/lib/AsyncAutocomplete.test.tsx
+++ b/packages/autocomplete/src/lib/AsyncAutocomplete.test.tsx
@@ -103,6 +103,85 @@ describe('AsyncAutocomplete', () => {
});
});
+ test('prependedOptions should be available', async () => {
+ const client = new QueryClient();
+
+ render(
+
+
+
+ );
+
+ const input = screen.getByRole('combobox');
+ fireEvent.click(input);
+ fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+ waitFor(() => {
+ expect(screen.getByText('Option 0')).toBeDefined();
+ expect(screen.getByText('Option 1')).toBeDefined();
+ });
+
+ fireEvent.click(await screen.findByText('Option 0'));
+
+ waitFor(() => {
+ expect(screen.getByText('Option 0')).toBeDefined();
+ });
+ });
+
+ test('prependedOptions should not be duplicative', async () => {
+ const client = new QueryClient();
+
+ render(
+
+
+
+ );
+
+ const input = screen.getByRole('combobox');
+ fireEvent.click(input);
+ fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+ waitFor(() => {
+ expect(screen.getAllByText('Option 1').length).toBe(1);
+ });
+ });
+
+ test('should filter duplicates using custom isOptionEqualToValue', async () => {
+ const client = new QueryClient();
+
+ render(
+
+ option.value === value.value}
+ loadOptions={loadOptions}
+ FieldProps={{ label: 'Test' }}
+ />
+
+ );
+
+ const input = screen.getByRole('combobox');
+ fireEvent.click(input);
+ fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+ await waitFor(() => {
+ expect(screen.getByText('Option 1')).toBeDefined();
+ expect(screen.getByText('Option 2')).toBeDefined();
+ expect(screen.getAllByText('Option 1')).toHaveLength(1);
+ });
+ });
+
test('should call loadOptions when scroll to the bottom', async () => {
const client = new QueryClient();
diff --git a/packages/autocomplete/src/lib/AsyncAutocomplete.tsx b/packages/autocomplete/src/lib/AsyncAutocomplete.tsx
index 0a9c76fde..3af092b3c 100644
--- a/packages/autocomplete/src/lib/AsyncAutocomplete.tsx
+++ b/packages/autocomplete/src/lib/AsyncAutocomplete.tsx
@@ -33,6 +33,8 @@ export interface AsyncAutocompleteProps<
watchParams?: Record;
/** Time to wait before searching with the input value typed into the component */
debounceTimeout?: number;
+ /** Options to prepend to the list (e.g., frequently used items). These will be filtered from loadOptions results to avoid duplicates. */
+ prependOptions?: Option[];
}
export const AsyncAutocomplete = <
@@ -51,6 +53,7 @@ export const AsyncAutocomplete = <
debounceTimeout = 350,
FieldProps,
onInputChange,
+ prependOptions = [],
...rest
}: AsyncAutocompleteProps