Multi index search page doesn't work with searchable facet

[MFoksik]

🐛 Bug description

We are working on search page, where we render results from 3 indexes. First index have sorting and filtering functionality, while two others only display results to search query provided in search field.

All was fine until we wanted to turn on searchable functionality for one of facets with a lot of options possible. When we turned on searchable option on Authors facet for Products index, than site crashed with that info:

react-instantsearch: searching in *List is not available when used inside a multi index context

After debugging and searching what causes that issue, we found in your source code this:

https://github.com/algolia/react-instantsearch/blob/master/packages/react-instantsearch-core/src/connectors/connectMenu.js#L119

    // Search For Facet Values is not available with derived helper (used for multi index search)
    if (searchable && indexContextValue) {
      throw new Error(
        'react-instantsearch: searching in *List is not available when used inside a' +
          ' multi index context'
      );
    }

So it means if facet is type searchable and is part of multi index search page and should only apply to individual index - throw error.

We need this functionality to build complex search page with searchable facets added to filter results for one index, that is part of multi index search page.

As for now, we need to switch off that facet before publishing our product, as client does not want facet without searchable option. So we agreed to add this option as soon as Algolia will add that functionality.

Searchable facet works correctly when used on page with only one index.

Please provide ETA for adding this functionality.

Same info in docs: Note that this feature is not available if you’re using Multi Index Search.

---

Multi index page: https://www.norli.no/search?query=boker In Filtering section, if Forfatter facet is type searchable - page breaks with error react-instantsearch: searching in *List is not available when used inside a multi index context

Single index page: https://www.norli.no/boker Same example here, but only products index used - Forfattere facet can be type searchable and works good, but as facets are the same among both pages we needed to switch of searchable

<InstantSearch
    indexName={index_name_products}
    searchClient={searchClient}
    searchState={searchState}
>
    <Index indexName={index_name_products}>
        <Configure query={query} hitsPerPage={100} />
    </Index>
    <Index indexName={index_name_authors}>
        <Configure query={query} hitsPerPage={36} />
    </Index>
    <Index indexName={index_name_pages}>
        <Configure query={query} hitsPerPage={18} />
    </Index>

    <Tabs>
        <TabList>
            <Tab>
                <Index indexName={index_name_products}>
                    <Stats />
                </Index>
            </Tab>

            <Tab>
                <Index indexName={index_name_authors}>
                    <Stats />
                </Index>
            </Tab>

            <Tab>
                <Index indexName={index_name_pages}>
                    <Stats />
                </Index>
            </Tab>
        </TabList>

        <TabPanel>
            <Index indexName={index_name_products}>
                <RefinementList /> // <-- searchable doesn't work in that environment
                <AlgoliaProductsHits query={query} />
                <Pagination />
            </Index>
        </TabPanel>

        <TabPanel>
            <Index indexName={index_name_authors}>
                <AlgoliaAuthorsHits query={query} />
            </Index>
        </TabPanel>

        <TabPanel>
            <Index indexName={index_name_pages}>
                <AlgoliaPagesHits query={query} />
            </Index>
        </TabPanel>
    </Tabs>
</InstantSearch>

Environment

• React InstantSearch version: 6.10.3
• React version:17.0.2
• Browser: Chrome 108.0.5359.98
• OS: Linux

[Haroenv]

Yes, this is a known limitation. you can instead use React InstantSearch Hooks, which does have this feature :)