Grouped Hits not compatible with react-instantsearch Highlight element

[RBSUS]

Description

The terms that are expected to be highlighted from the query string are not highlighted when I pass a hit from _grouped_hits into the react-instant Highlight element. The top level hit works fine as the matched query string appears highlighted, yet the hits within _grouped_hits instead display the matched term wrapped in a new string 'ais_highlight'

Expected Behavior

Actual Behavior

Metadata

"typesense": "^1.0.2",
"typesense-instantsearch-adapter": "^2.7.1",
"react-instantsearch": "^7.0.1",

OS: Windows

[Jason Bosco]

I just tested this in a demo project and it seems to work fine for me.

Could you share a simple project that replicates the issue?

[m0ppers]

I have the same problem (but using vue). using adapter v2.8.0. this is my current workaround:

const transformItems = (items) => {
  // fix snippet containing __ais-highlight__ tags https://github.com/typesense/typesense-instantsearch-adapter/issues/184
  return items.map((item) => {
    item._grouped_hits = item._grouped_hits.map((hit: any) => {
      // unclear why this is necessary
      if (!hit._rawTypesenseHit.highlight.text) {
        return hit;
      }
      hit._snippetResult.text.value =
        hit._rawTypesenseHit.highlight.text.snippet;
      return hit;
    });
    return item;
  });
};

Sorry. No time right now to share a demoproject. This is my adapter config:

const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
  server: {
    apiKey: "xyz", // Be sure to use the search-only-api-key
    nodes: [
      {
        host: "localhost",
        port: 8108,
        protocol: "http",
      },
    ],
  },
  additionalSearchParameters: {
    query_by: "text",
    group_by: "filename",
  },
  flattenGroupedHits: false,
});