diff --git a/packages/react-instantsearch-core/src/components/AutocompleteWrapper.tsx b/packages/react-instantsearch-core/src/components/AutocompleteWrapper.tsx
deleted file mode 100644
index b13075f058f..00000000000
--- a/packages/react-instantsearch-core/src/components/AutocompleteWrapper.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { useIndexContext } from '../lib/useIndexContext';
-
-import { Index } from './Index';
-
-export type AutocompleteWrapperProps = {
- children: React.ReactNode;
-};
-
-export function EXPERIMENTAL_AutocompleteWrapper({
- children,
-}: AutocompleteWrapperProps) {
- const parentIndex = useIndexContext();
-
- const parentIndexName = parentIndex.getIndexName();
-
- return (
-
- {children}
-
- );
-}
diff --git a/packages/react-instantsearch-core/src/hooks/useAutocomplete.ts b/packages/react-instantsearch-core/src/hooks/useAutocomplete.ts
deleted file mode 100644
index 9f8b370c2e9..00000000000
--- a/packages/react-instantsearch-core/src/hooks/useAutocomplete.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useSearchBox } from '../connectors/useSearchBox';
-
-export function EXPERIMENTAL_useAutocomplete() {
- const { query, refine } = useSearchBox();
-
- return {
- query,
- refine,
- };
-}
diff --git a/packages/react-instantsearch-core/src/index.ts b/packages/react-instantsearch-core/src/index.ts
index 202df164d73..4cdc1c8fe7f 100644
--- a/packages/react-instantsearch-core/src/index.ts
+++ b/packages/react-instantsearch-core/src/index.ts
@@ -1,5 +1,4 @@
export { default as version } from './version';
-export * from './components/AutocompleteWrapper';
export * from './components/Configure';
export * from './components/DynamicWidgets';
export * from './components/Index';
@@ -31,7 +30,6 @@ export * from './connectors/useStats';
export * from './connectors/useToggleRefinement';
export * from './connectors/useTrendingItems';
export * from './connectors/useLookingSimilar';
-export * from './hooks/useAutocomplete';
export * from './hooks/useConnector';
export * from './hooks/useInstantSearch';
export * from './lib/wrapPromiseWithState';
diff --git a/packages/react-instantsearch/src/components/Autocomplete.tsx b/packages/react-instantsearch/src/components/Autocomplete.tsx
index 21daa05e5da..ecce449281a 100644
--- a/packages/react-instantsearch/src/components/Autocomplete.tsx
+++ b/packages/react-instantsearch/src/components/Autocomplete.tsx
@@ -1,19 +1,30 @@
import React from 'react';
-import {
- EXPERIMENTAL_AutocompleteWrapper as AutocompleteWrapper,
- EXPERIMENTAL_useAutocomplete as useAutocomplete,
-} from 'react-instantsearch-core';
+import { Index } from 'react-instantsearch-core';
-export function EXPERIMENTAL_Autocomplete() {
- return (
-
-
-
- );
-}
+import { Hits, SearchBox } from '../widgets';
+
+import type { BaseHit, Hit } from 'instantsearch.js';
-function AutocompleteInner() {
- useAutocomplete();
+type IndexConfig = Hit> = {
+ indexName: string;
+ getQuery?: (item: TItem) => string;
+ getURL?: (item: TItem) => string;
+ itemComponent: React.ComponentType | React.ComponentType;
+};
- return null;
+export type AutocompleteProps = {
+ indices: IndexConfig[];
+};
+
+export function EXPERIMENTAL_Autocomplete({ indices }: AutocompleteProps) {
+ return (
+
+
+ {indices.map((index) => (
+
+ } />
+
+ ))}
+
+ );
}
diff --git a/packages/react-instantsearch/src/components/__tests__/Autocomplete.test.tsx b/packages/react-instantsearch/src/components/__tests__/Autocomplete.test.tsx
new file mode 100644
index 00000000000..3a8c6b504ff
--- /dev/null
+++ b/packages/react-instantsearch/src/components/__tests__/Autocomplete.test.tsx
@@ -0,0 +1,59 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import {
+ createMultiSearchResponse,
+ createSearchClient,
+ createSingleSearchResponse,
+} from '@instantsearch/mocks';
+import { InstantSearchTestWrapper } from '@instantsearch/testutils';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { EXPERIMENTAL_Autocomplete } from '../Autocomplete';
+
+describe('Autocomplete', () => {
+ function createMockedSearchClient() {
+ return createSearchClient({
+ // @ts-expect-error - doesn't properly handle multi index, expects all responses to be of the same type
+ search: jest.fn(() =>
+ Promise.resolve(
+ createMultiSearchResponse(
+ createSingleSearchResponse({
+ hits: [{ objectID: '1', name: 'Item 1' }],
+ }),
+ // @ts-expect-error - ignore second response type
+ createSingleSearchResponse({
+ hits: [{ objectID: '2', query: 'hello' }],
+ })
+ )
+ )
+ ),
+ });
+ }
+
+ test('should render a searchbox and indices with hits', async () => {
+ const searchClient = createMockedSearchClient();
+ render(
+
+ props.name,
+ },
+ {
+ indexName: 'indexName2',
+ itemComponent: (props: { query: string }) => props.query,
+ },
+ ]}
+ />
+
+ );
+
+ expect(await screen.findByText('Item 1')).toBeInTheDocument();
+ expect(await screen.findByText('hello')).toBeInTheDocument();
+ expect(screen.getByRole('searchbox')).toBeInTheDocument();
+ });
+});