react-instantsearch 7.27.0 → 7.28.0

package/dist/cjs/widgets/Autocomplete.js

@@ -319,7 +319,7 @@ function EXPERIMENTAL_Autocomplete(_0) {
     }))));
 }
 function InnerAutocomplete(_0) {
-    var indicesConfig = _0.indicesConfig, refineSearchBox = _0.refineSearchBox, isSearchStalled = _0.isSearchStalled, getSearchPageURL = _0.getSearchPageURL, userOnSelect = _0.onSelect, indexUiState = _0.indexUiState, isSearchPage = _0.isSearchPage, PanelComponent = _0.panelComponent, showRecent = _0.showRecent, recentSearchConfig = _0.recentSearchConfig, showQuerySuggestions = _0.showQuerySuggestions, showPromptSuggestions = _0.showPromptSuggestions, chatRenderState = _0.chatRenderState, transformItems = _0.transformItems, placeholder = _0.placeholder, _0_detachedMediaQuery = _0.detachedMediaQuery, detachedMediaQuery = _0_detachedMediaQuery === void 0 ? DEFAULT_DETACHED_MEDIA_QUERY : _0_detachedMediaQuery, translations = _0.translations, classNames = _0.classNames, props = _object_without_properties._(_0, [
+    var indicesConfig = _0.indicesConfig, refineSearchBox = _0.refineSearchBox, isSearchStalled = _0.isSearchStalled, getSearchPageURL = _0.getSearchPageURL, userOnSelect = _0.onSelect, indexUiState = _0.indexUiState, isSearchPage = _0.isSearchPage, PanelComponent = _0.panelComponent, showRecent = _0.showRecent, recentSearchConfig = _0.recentSearchConfig, showQuerySuggestions = _0.showQuerySuggestions, showPromptSuggestions = _0.showPromptSuggestions, chatRenderState = _0.chatRenderState, transformItems = _0.transformItems, placeholder = _0.placeholder, autoFocus = _0.autoFocus, _0_detachedMediaQuery = _0.detachedMediaQuery, detachedMediaQuery = _0_detachedMediaQuery === void 0 ? DEFAULT_DETACHED_MEDIA_QUERY : _0_detachedMediaQuery, translations = _0.translations, classNames = _0.classNames, props = _object_without_properties._(_0, [
         "indicesConfig",
         "refineSearchBox",
         "isSearchStalled",
@@ -335,6 +335,7 @@ function InnerAutocomplete(_0) {
         "chatRenderState",
         "transformItems",
         "placeholder",
+        "autoFocus",
         "detachedMediaQuery",
         "translations",
         "classNames"
@@ -400,6 +401,15 @@ function InnerAutocomplete(_0) {
         promptSuggestionsLimit
     ]);
     (0, _react.useRef)(false);
+    var allIndicesEmpty = indicesForPanel.every(function(param) {
+        var hits = param.hits;
+        return hits.length === 0;
+    });
+    var recentEmpty = !storageHits || storageHits.length === 0;
+    var hasNoResultsTemplate = indicesConfig.some(function(c) {
+        return c.noResultsComponent !== undefined;
+    });
+    var shouldHideEmptyPanel = allIndicesEmpty && recentEmpty && !hasNoResultsTemplate && !PanelComponent;
     var _usePropGetters = usePropGetters({
         indices: indicesForPropGettersWithPromptSuggestions,
         indicesConfig: indicesConfigForPropGetters,
@@ -444,7 +454,9 @@ function InnerAutocomplete(_0) {
             }
         },
         placeholder: placeholder,
-        isDetached: isDetached
+        isDetached: isDetached,
+        shouldHidePanel: shouldHideEmptyPanel,
+        autoFocus: autoFocus
     }), getInputProps = _usePropGetters.getInputProps, getItemProps = _usePropGetters.getItemProps, getPanelProps = _usePropGetters.getPanelProps, getRootProps = _usePropGetters.getRootProps, isOpen = _usePropGetters.isOpen, setIsOpen = _usePropGetters.setIsOpen, focusInput = _usePropGetters.focusInput;
     // Open panel and focus input when modal opens
     (0, _react.useEffect)(function() {
@@ -517,6 +529,7 @@ function InnerAutocomplete(_0) {
             HeaderComponent: currentIndexConfig.headerComponent,
             // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
             ItemComponent: currentIndexConfig.itemComponent,
+            NoResultsComponent: currentIndexConfig.noResultsComponent,
             items: hits.map(function(item) {
                 return _object_spread_props._(_object_spread._({}, item), {
                     __indexName: indexId
@@ -548,8 +561,12 @@ function InnerAutocomplete(_0) {
     var detachedContainerClassNames = isModalDetached ? _object_spread_props._(_object_spread._({}, classNames), {
         detachedContainer: (0, _instantsearchuicomponents.cx)('ais-AutocompleteDetachedContainer--modal', classNames === null || classNames === void 0 ? void 0 : classNames.detachedContainer)
     }) : classNames;
+    var _getRootProps = getRootProps(), rootRef = _getRootProps.ref, rootProps = _object_without_properties._(_getRootProps, [
+        "ref"
+    ]);
     if (isDetached) {
-        return /*#__PURE__*/ _react.default.createElement(Autocomplete, _object_spread_props._(_object_spread._({}, props, getRootProps()), {
+        return /*#__PURE__*/ _react.default.createElement(Autocomplete, _object_spread_props._(_object_spread._({}, props, rootProps), {
+            rootRef: rootRef,
             classNames: classNames
         }), /*#__PURE__*/ _react.default.createElement(AutocompleteDetachedSearchButton, {
             query: currentRefinement || indexUiState.query || '',
@@ -582,7 +599,8 @@ function InnerAutocomplete(_0) {
         }, searchBoxContent), panelContent)));
     }
     // Normal (non-detached) rendering
-    return /*#__PURE__*/ _react.default.createElement(Autocomplete, _object_spread_props._(_object_spread._({}, props, getRootProps()), {
+    return /*#__PURE__*/ _react.default.createElement(Autocomplete, _object_spread_props._(_object_spread._({}, props, rootProps), {
+        rootRef: rootRef,
         classNames: classNames
     }), searchBoxContent, panelContent);
 }

package/dist/es/widgets/Autocomplete.d.ts

@@ -9,6 +9,7 @@ type AutocompleteSearchParameters = Omit<PlainSearchParameters, 'index'>;
 type IndexConfig<TItem extends BaseHit> = AutocompleteIndexConfig<TItem> & {
     headerComponent?: AutocompleteIndexProps<TItem>['HeaderComponent'];
     itemComponent: AutocompleteIndexProps<TItem>['ItemComponent'];
+    noResultsComponent?: AutocompleteIndexProps<TItem>['NoResultsComponent'];
     searchParameters?: AutocompleteSearchParameters;
     classNames?: Partial<AutocompleteIndexClassNames>;
 };
@@ -58,6 +59,10 @@ export type AutocompleteProps<TItem extends BaseHit> = ComponentProps<'div'> & {
     searchParameters?: AutocompleteSearchParameters;
     classNames?: Partial<AutocompleteClassNames>;
     placeholder?: string;
+    /**
+     * Whether the input should be focused and the panel open initially.
+     */
+    autoFocus?: boolean;
     /**
      * Media query to enable detached (mobile) mode.
      * When the media query matches, the autocomplete switches to a full-screen overlay.

package/dist/es/widgets/Autocomplete.js

@@ -308,7 +308,7 @@ function EXPERIMENTAL_Autocomplete(_0) {
     }))));
 }
 function InnerAutocomplete(_0) {
-    var indicesConfig = _0.indicesConfig, refineSearchBox = _0.refineSearchBox, isSearchStalled = _0.isSearchStalled, getSearchPageURL = _0.getSearchPageURL, userOnSelect = _0.onSelect, indexUiState = _0.indexUiState, isSearchPage = _0.isSearchPage, PanelComponent = _0.panelComponent, showRecent = _0.showRecent, recentSearchConfig = _0.recentSearchConfig, showQuerySuggestions = _0.showQuerySuggestions, showPromptSuggestions = _0.showPromptSuggestions, chatRenderState = _0.chatRenderState, transformItems = _0.transformItems, placeholder = _0.placeholder, _0_detachedMediaQuery = _0.detachedMediaQuery, detachedMediaQuery = _0_detachedMediaQuery === void 0 ? DEFAULT_DETACHED_MEDIA_QUERY : _0_detachedMediaQuery, translations = _0.translations, classNames = _0.classNames, props = _(_0, [
+    var indicesConfig = _0.indicesConfig, refineSearchBox = _0.refineSearchBox, isSearchStalled = _0.isSearchStalled, getSearchPageURL = _0.getSearchPageURL, userOnSelect = _0.onSelect, indexUiState = _0.indexUiState, isSearchPage = _0.isSearchPage, PanelComponent = _0.panelComponent, showRecent = _0.showRecent, recentSearchConfig = _0.recentSearchConfig, showQuerySuggestions = _0.showQuerySuggestions, showPromptSuggestions = _0.showPromptSuggestions, chatRenderState = _0.chatRenderState, transformItems = _0.transformItems, placeholder = _0.placeholder, autoFocus = _0.autoFocus, _0_detachedMediaQuery = _0.detachedMediaQuery, detachedMediaQuery = _0_detachedMediaQuery === void 0 ? DEFAULT_DETACHED_MEDIA_QUERY : _0_detachedMediaQuery, translations = _0.translations, classNames = _0.classNames, props = _(_0, [
         "indicesConfig",
         "refineSearchBox",
         "isSearchStalled",
@@ -324,6 +324,7 @@ function InnerAutocomplete(_0) {
         "chatRenderState",
         "transformItems",
         "placeholder",
+        "autoFocus",
         "detachedMediaQuery",
         "translations",
         "classNames"
@@ -389,6 +390,15 @@ function InnerAutocomplete(_0) {
         promptSuggestionsLimit
     ]);
     useRef(false);
+    var allIndicesEmpty = indicesForPanel.every(function(param) {
+        var hits = param.hits;
+        return hits.length === 0;
+    });
+    var recentEmpty = !storageHits || storageHits.length === 0;
+    var hasNoResultsTemplate = indicesConfig.some(function(c) {
+        return c.noResultsComponent !== undefined;
+    });
+    var shouldHideEmptyPanel = allIndicesEmpty && recentEmpty && !hasNoResultsTemplate && !PanelComponent;
     var _usePropGetters = usePropGetters({
         indices: indicesForPropGettersWithPromptSuggestions,
         indicesConfig: indicesConfigForPropGetters,
@@ -433,7 +443,9 @@ function InnerAutocomplete(_0) {
             }
         },
         placeholder: placeholder,
-        isDetached: isDetached
+        isDetached: isDetached,
+        shouldHidePanel: shouldHideEmptyPanel,
+        autoFocus: autoFocus
     }), getInputProps = _usePropGetters.getInputProps, getItemProps = _usePropGetters.getItemProps, getPanelProps = _usePropGetters.getPanelProps, getRootProps = _usePropGetters.getRootProps, isOpen = _usePropGetters.isOpen, setIsOpen = _usePropGetters.setIsOpen, focusInput = _usePropGetters.focusInput;
     // Open panel and focus input when modal opens
     useEffect(function() {
@@ -506,6 +518,7 @@ function InnerAutocomplete(_0) {
             HeaderComponent: currentIndexConfig.headerComponent,
             // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
             ItemComponent: currentIndexConfig.itemComponent,
+            NoResultsComponent: currentIndexConfig.noResultsComponent,
             items: hits.map(function(item) {
                 return _$4(_$1({}, item), {
                     __indexName: indexId
@@ -537,8 +550,12 @@ function InnerAutocomplete(_0) {
     var detachedContainerClassNames = isModalDetached ? _$4(_$1({}, classNames), {
         detachedContainer: cx('ais-AutocompleteDetachedContainer--modal', classNames === null || classNames === void 0 ? void 0 : classNames.detachedContainer)
     }) : classNames;
+    var _getRootProps = getRootProps(), rootRef = _getRootProps.ref, rootProps = _(_getRootProps, [
+        "ref"
+    ]);
     if (isDetached) {
-        return /*#__PURE__*/ React.createElement(Autocomplete, _$4(_$1({}, props, getRootProps()), {
+        return /*#__PURE__*/ React.createElement(Autocomplete, _$4(_$1({}, props, rootProps), {
+            rootRef: rootRef,
             classNames: classNames
         }), /*#__PURE__*/ React.createElement(AutocompleteDetachedSearchButton, {
             query: currentRefinement || indexUiState.query || '',
@@ -571,7 +588,8 @@ function InnerAutocomplete(_0) {
         }, searchBoxContent), panelContent)));
     }
     // Normal (non-detached) rendering
-    return /*#__PURE__*/ React.createElement(Autocomplete, _$4(_$1({}, props, getRootProps()), {
+    return /*#__PURE__*/ React.createElement(Autocomplete, _$4(_$1({}, props, rootProps), {
+        rootRef: rootRef,
         classNames: classNames
     }), searchBoxContent, panelContent);
 }

package/dist/umd/ReactInstantSearch.js

@@ -1,4 +1,4 @@
-/*! React InstantSearch 7.27.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
+/*! React InstantSearch 7.28.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
 	typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
@@ -24,7 +24,7 @@
 
 	var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-	var version$2 = '7.27.0';
+	var version$2 = '7.28.0';
 
 	function getDefaultExportFromCjs (x) {
 		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -10081,7 +10081,7 @@
 	    };
 	}
 
-	var version = '4.91.0';
+	var version = '4.92.0';
 
 	function hydrateSearchClient(client, results) {
 	    if (!results) {
@@ -17830,12 +17830,14 @@
 	function createAutocompleteComponent(param) {
 	    var createElement = param.createElement;
 	    return function Autocomplete(userProps) {
-	        var children = userProps.children, _userProps_classNames = userProps.classNames, classNames = _userProps_classNames === void 0 ? {} : _userProps_classNames, props = _object_without_propertiesExports._(userProps, [
+	        var children = userProps.children, _userProps_classNames = userProps.classNames, classNames = _userProps_classNames === void 0 ? {} : _userProps_classNames, rootRef = userProps.rootRef, props = _object_without_propertiesExports._(userProps, [
 	            "children",
-	            "classNames"
+	            "classNames",
+	            "rootRef"
 	        ]);
 	        return /*#__PURE__*/ createElement("div", _object_spreadExports._({
-	            className: cx('ais-Autocomplete', classNames.root)
+	            className: cx('ais-Autocomplete', classNames.root),
+	            ref: rootRef
 	        }, props), children);
 	    };
 	}
@@ -18020,8 +18022,8 @@
 	function createAutocompleteIndexComponent(param) {
 	    var createElement = param.createElement;
 	    return function AutocompleteIndex(userProps) {
-	        var items = userProps.items, HeaderComponent = userProps.HeaderComponent, ItemComponent = userProps.ItemComponent, getItemProps = userProps.getItemProps, _userProps_classNames = userProps.classNames, classNames = _userProps_classNames === void 0 ? {} : _userProps_classNames;
-	        if (items.length === 0) {
+	        var items = userProps.items, HeaderComponent = userProps.HeaderComponent, ItemComponent = userProps.ItemComponent, NoResultsComponent = userProps.NoResultsComponent, getItemProps = userProps.getItemProps, _userProps_classNames = userProps.classNames, classNames = _userProps_classNames === void 0 ? {} : _userProps_classNames;
+	        if (items.length === 0 && !NoResultsComponent) {
 	            return null;
 	        }
 	        return /*#__PURE__*/ createElement("div", {
@@ -18030,7 +18032,9 @@
 	            className: cx('ais-AutocompleteIndexHeader', classNames.header)
 	        }, /*#__PURE__*/ createElement(HeaderComponent, {
 	            items: items
-	        })), /*#__PURE__*/ createElement("ol", {
+	        })), items.length === 0 && NoResultsComponent ? /*#__PURE__*/ createElement("div", {
+	            className: cx('ais-AutocompleteIndexNoResults', classNames.noResults)
+	        }, /*#__PURE__*/ createElement(NoResultsComponent, null)) : /*#__PURE__*/ createElement("ol", {
 	            className: cx('ais-AutocompleteIndexList', classNames.list)
 	        }, items.map(function(item, index) {
 	            var _getItemProps = getItemProps(item, index), className = _getItemProps.className, onSelect = _getItemProps.onSelect, onApply = _getItemProps.onApply, itemProps = _object_without_propertiesExports._(_getItemProps, [
@@ -18491,11 +18495,11 @@
 	function createAutocompletePropGetters(param) {
 	    var useEffect = param.useEffect, useId = param.useId, useMemo = param.useMemo, useRef = param.useRef, useState = param.useState;
 	    return function usePropGetters(param) {
-	        var indices = param.indices, indicesConfig = param.indicesConfig, onRefine = param.onRefine, globalOnSelect = param.onSelect, onApply = param.onApply, onSubmit = param.onSubmit, placeholder = param.placeholder, _param_isDetached = param.isDetached, isDetached = _param_isDetached === void 0 ? false : _param_isDetached;
+	        var indices = param.indices, indicesConfig = param.indicesConfig, onRefine = param.onRefine, globalOnSelect = param.onSelect, onApply = param.onApply, onSubmit = param.onSubmit, placeholder = param.placeholder, _param_isDetached = param.isDetached, isDetached = _param_isDetached === void 0 ? false : _param_isDetached, _param_shouldHidePanel = param.shouldHidePanel, shouldHidePanel = _param_shouldHidePanel === void 0 ? false : _param_shouldHidePanel, _param_autoFocus = param.autoFocus, autoFocus = _param_autoFocus === void 0 ? false : _param_autoFocus;
 	        var getElementId = createGetElementId(useId());
 	        var inputRef = useRef(null);
 	        var rootRef = useRef(null);
-	        var _useState = _sliced_to_arrayExports._(useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
+	        var _useState = _sliced_to_arrayExports._(useState(autoFocus), 2), isOpen = _useState[0], setIsOpen = _useState[1];
 	        var _useState1 = _sliced_to_arrayExports._(useState(undefined), 2), activeDescendant = _useState1[0], setActiveDescendant = _useState1[1];
 	        var _useMemo = useMemo(function() {
 	            return buildItems({
@@ -18580,6 +18584,7 @@
 	                    id: getElementId('input'),
 	                    ref: inputRef,
 	                    role: 'combobox',
+	                    autoFocus: autoFocus,
 	                    'aria-autocomplete': 'list',
 	                    'aria-expanded': isOpen,
 	                    'aria-haspopup': 'grid',
@@ -18667,7 +18672,7 @@
 	            },
 	            getPanelProps: function getPanelProps() {
 	                return {
-	                    hidden: !isOpen,
+	                    hidden: !isOpen || shouldHidePanel,
 	                    id: getElementId('panel'),
 	                    role: 'grid',
 	                    'aria-labelledby': getElementId('input')
@@ -21179,7 +21184,7 @@
 	    }))));
 	}
 	function InnerAutocomplete(_0) {
-	    var indicesConfig = _0.indicesConfig, refineSearchBox = _0.refineSearchBox, isSearchStalled = _0.isSearchStalled, getSearchPageURL = _0.getSearchPageURL, userOnSelect = _0.onSelect, indexUiState = _0.indexUiState, isSearchPage = _0.isSearchPage, PanelComponent = _0.panelComponent, showRecent = _0.showRecent, recentSearchConfig = _0.recentSearchConfig, showQuerySuggestions = _0.showQuerySuggestions, showPromptSuggestions = _0.showPromptSuggestions, chatRenderState = _0.chatRenderState, transformItems = _0.transformItems, placeholder = _0.placeholder, _0_detachedMediaQuery = _0.detachedMediaQuery, detachedMediaQuery = _0_detachedMediaQuery === void 0 ? DEFAULT_DETACHED_MEDIA_QUERY : _0_detachedMediaQuery, translations = _0.translations, classNames = _0.classNames, props = _object_without_properties(_0, [
+	    var indicesConfig = _0.indicesConfig, refineSearchBox = _0.refineSearchBox, isSearchStalled = _0.isSearchStalled, getSearchPageURL = _0.getSearchPageURL, userOnSelect = _0.onSelect, indexUiState = _0.indexUiState, isSearchPage = _0.isSearchPage, PanelComponent = _0.panelComponent, showRecent = _0.showRecent, recentSearchConfig = _0.recentSearchConfig, showQuerySuggestions = _0.showQuerySuggestions, showPromptSuggestions = _0.showPromptSuggestions, chatRenderState = _0.chatRenderState, transformItems = _0.transformItems, placeholder = _0.placeholder, autoFocus = _0.autoFocus, _0_detachedMediaQuery = _0.detachedMediaQuery, detachedMediaQuery = _0_detachedMediaQuery === void 0 ? DEFAULT_DETACHED_MEDIA_QUERY : _0_detachedMediaQuery, translations = _0.translations, classNames = _0.classNames, props = _object_without_properties(_0, [
 	        "indicesConfig",
 	        "refineSearchBox",
 	        "isSearchStalled",
@@ -21195,6 +21200,7 @@
 	        "chatRenderState",
 	        "transformItems",
 	        "placeholder",
+	        "autoFocus",
 	        "detachedMediaQuery",
 	        "translations",
 	        "classNames"
@@ -21260,6 +21266,15 @@
 	        promptSuggestionsLimit
 	    ]);
 	    var hasWarnedMissingPromptSuggestionsChatRef = React.useRef(false);
+	    var allIndicesEmpty = indicesForPanel.every(function(param) {
+	        var hits = param.hits;
+	        return hits.length === 0;
+	    });
+	    var recentEmpty = !storageHits || storageHits.length === 0;
+	    var hasNoResultsTemplate = indicesConfig.some(function(c) {
+	        return c.noResultsComponent !== undefined;
+	    });
+	    var shouldHideEmptyPanel = allIndicesEmpty && recentEmpty && !hasNoResultsTemplate && !PanelComponent;
 	    var _usePropGetters = usePropGetters({
 	        indices: indicesForPropGettersWithPromptSuggestions,
 	        indicesConfig: indicesConfigForPropGetters,
@@ -21308,7 +21323,9 @@
 	            }
 	        },
 	        placeholder: placeholder,
-	        isDetached: isDetached
+	        isDetached: isDetached,
+	        shouldHidePanel: shouldHideEmptyPanel,
+	        autoFocus: autoFocus
 	    }), getInputProps = _usePropGetters.getInputProps, getItemProps = _usePropGetters.getItemProps, getPanelProps = _usePropGetters.getPanelProps, getRootProps = _usePropGetters.getRootProps, isOpen = _usePropGetters.isOpen, setIsOpen = _usePropGetters.setIsOpen, focusInput = _usePropGetters.focusInput;
 	    // Open panel and focus input when modal opens
 	    React.useEffect(function() {
@@ -21381,6 +21398,7 @@
 	            HeaderComponent: currentIndexConfig.headerComponent,
 	            // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
 	            ItemComponent: currentIndexConfig.itemComponent,
+	            NoResultsComponent: currentIndexConfig.noResultsComponent,
 	            items: hits.map(function(item) {
 	                return _object_spread_props(_object_spread({}, item), {
 	                    __indexName: indexId
@@ -21412,8 +21430,12 @@
 	    var detachedContainerClassNames = isModalDetached ? _object_spread_props(_object_spread({}, classNames), {
 	        detachedContainer: cx('ais-AutocompleteDetachedContainer--modal', classNames === null || classNames === void 0 ? void 0 : classNames.detachedContainer)
 	    }) : classNames;
+	    var _getRootProps = getRootProps(), rootRef = _getRootProps.ref, rootProps = _object_without_properties(_getRootProps, [
+	        "ref"
+	    ]);
 	    if (isDetached) {
-	        return /*#__PURE__*/ React.createElement(Autocomplete, _object_spread_props(_object_spread({}, props, getRootProps()), {
+	        return /*#__PURE__*/ React.createElement(Autocomplete, _object_spread_props(_object_spread({}, props, rootProps), {
+	            rootRef: rootRef,
 	            classNames: classNames
 	        }), /*#__PURE__*/ React.createElement(AutocompleteDetachedSearchButton, {
 	            query: currentRefinement || indexUiState.query || '',
@@ -21446,7 +21468,8 @@
 	        }, searchBoxContent), panelContent)));
 	    }
 	    // Normal (non-detached) rendering
-	    return /*#__PURE__*/ React.createElement(Autocomplete, _object_spread_props(_object_spread({}, props, getRootProps()), {
+	    return /*#__PURE__*/ React.createElement(Autocomplete, _object_spread_props(_object_spread({}, props, rootProps), {
+	        rootRef: rootRef,
 	        classNames: classNames
 	    }), searchBoxContent, panelContent);
 	}