Autocomplete + InstantSearch: how to update instantsearch from tag filters from autocomplete

Hi there!

I am trying to integrate InstantSearch + Autocomplete.

I want to use autocomplete to filter by tags, and that the selected tags update my search results given by instantsearch.

I have followed these 2 documentation pages:

This is all working well and is almost what I want. I just miss 1 final step that I am not able to solve after hours trying… here it is:

Following Filtering results with tags | Autocomplete | Algolia, I am able to have the search results I want (filtered with my tags built with autocomplete) within the autocomplete dropdown. But I don’t want these results in the autocomplete dropdown, but in my min search result handled by instantsearch.

My issue is I can’t find a way to pass the tag filters from autocomplete to instantsearch.
I assume I should doing so with something like:

const search = instantsearch({ //... instantiate instantsearch ... // })
// Mount a virtual search box to manipulate InstantSearch's `query` UI  state parameter.
const virtualSearchBox =  instantsearch.connectors.connectSearchBox(() => {});
search.addWidgets([
  virtualSearchBox({}),
...])
search.start()

// Set the InstantSearch index UI state from external events = autocomplete events?.
function setInstantSearchUiState(indexUiState) {
  search.setUiState(uiState => ({
    ...uiState,
    [INSTANT_SEARCH_INDEX_NAME]: {
      ...uiState[INSTANT_SEARCH_INDEX_NAME],
      // We reset the page when the search state changes.
      page: 1,
      ...indexUiState,
    },
  }))

}
function mapToAlgoliaFilters(tagsByFacet, operator = 'AND') {
  return Object.keys(tagsByFacet)
    .map((facet) => {
      return `(${tagsByFacet[facet]
        .map(({ value }) => `${facet}:"${value}"`)
        .join(' OR ')})`;
    })
    .join(` ${operator} `);
}

function groupBy(items, predicate) {

  return items.reduce((acc, item) => {
    const key = predicate(item);

    if (!acc.hasOwnProperty(key)) {
      acc[key] = [];
    }

    acc[key].push(item);

    return acc;
  }, {});
}

// now instantiate autocomplete
autocomplete({ ...

//here I assume I should be doing something to pass autocomplete filters to instantsearch by updating its uistate... but can't find how..
onSubmit({ state }) {

    // >>>>>> here format the tag filters to whatever format expected by instantsearch.. ?
    const tagsByFacet = groupBy(
      state.context.tagsPlugin.tags,
      (tag) => tag.facet
    );

    setInstantSearchUiState({
      query: state.query,
//    >>>>> and here set it in  InstantSearch UiState somehow
// >>> tried many things without success, using "refinementlist", "facetfilters", ... no effect
    })
  },


})

See comments with “>>>>” : this is where I guess I should do something. I tried many different combinations without success nor any effect.

Any idea what I am doing wrong?

Thanks a lot!

Adrien