FacetValue contains colon

[Skillkiller]

Description
Hello,
I use instant-meilisearch in conjunction with instantsearch.js. There I have added a refinementList which should allow to narrow down the search based on the games. Some games also contain a colon(:) in the name, for these games the search fails because an incorrect search condition was created. For clarification I have added a screenshot and 2 sample HTTP requests from the browser dev tool.

Search UI:

Expected behavior

With dbd selected request:
POST http://localhost:7700/multi-search

{
   "queries":[
      {
         "q":"",
         "indexUid":"clips",
         "facets":[
            "game"
         ],
         "attributesToHighlight":[
            "*"
         ],
         "highlightPreTag":"__ais-highlight__",
         "highlightPostTag":"__/ais-highlight__",
         "limit":21,
         "offset":0,
         "filter":[
            [
               "\"game\"=\"Dead by Daylight\""
            ]
         ]
      },
      {
         "q":"",
         "indexUid":"clips",
         "facets":[
            "game"
         ],
         "attributesToHighlight":[
            "*"
         ],
         "highlightPreTag":"__ais-highlight__",
         "highlightPostTag":"__/ais-highlight__",
         "limit":1,
         "offset":0
      }
   ]
}

Current behavior
When i select a game with a : in the name:
POST http://localhost:7700/multi-search

{
   "queries":[
      {
         "q":"",
         "indexUid":"clips",
         "facets":[
            "game"
         ],
         "attributesToHighlight":[
            "*"
         ],
         "highlightPreTag":"__ais-highlight__",
         "highlightPostTag":"__/ais-highlight__",
         "limit":21,
         "offset":0,
         "filter":[
            [
               "\"game:Hunt\"=\" Showdown\""
            ]
         ]
      },
      {
         "q":"",
         "indexUid":"clips",
         "facets":[
            "game"
         ],
         "attributesToHighlight":[
            "*"
         ],
         "highlightPreTag":"__ais-highlight__",
         "highlightPostTag":"__/ais-highlight__",
         "limit":1,
         "offset":0
      }
   ]
}

The colon seems to cause the filter condition to be formatted incorrectly. I tried it with refinementList({escapeFacetValues: true,...}) and false.

Environment (please complete the following information):

• OS: Windows 11
• Browser: Firefox 113.0.2
• Meilisearch version: 1.1.1
• instant-meilisearch version: 0.13.2
• instantsearch.js version: 4.56.1

[Skillkiller]

I think this is the problematic line: https://github.com/meilisearch/instant-meilisearch/blob/main/packages/instant-meilisearch/src/adapter/search-request-adapter/filter-adapter.ts#L17

[bidoubiwa]

Thanks @Skillkiller, indeed that's an unfortunate bug.

What is happening is that instantsearch provides me the filter like this facet:facetvalue (ex:game:Hunt:Showdown), I then need to transform this into the Meilisearch format facet=facetValue.

Since the character : is accepted in both the facet and the facet value, I do not know if the : belongs to the facet or the facetvalue.

Let's imagine a facet: "game:Hunt" and a facet value "Show:down", instantsearch would provide me the following:
game:Hunt:show:down and I'll need to chose where to split the string.

One of the solution to this issue would be to cache the facets and use them to try to infer where to split. In your case, we would have been able to match game from the cached facets to know we should split after it.
Nonetheless, this issue is not resolved if you have a facet game another game:something and somewhere a facet value something:other. But, this might be a very rare scenario haha.

I say caching as we cannot use the facets field from the same request. It does not always contain the facets used in the filters.

[angelcervera]

Maybe is necessary to add the possibility to escape : or something. Looks like using the algoria client, it's possible to search with colons. In fact, I think that this is not a weird case.

@Skillkiller How did you resolve this issue?

[Skillkiller]

@angelcervera My current workaround is that I no longer save a colon in Meilisearch. Before I save the data in Meilisearch, I replace all : with ˸. This is a modifier letter raised colon. Looks reasonably similar for debugging purposes and it most likely never appears in my normal data either.
For Instantsearch.js, I adjusted the hits and the RefinementList to undo the replacement: item.label.replaceAll(/˸/g, ":"). For this I use custom widgets. I'm not sure if this doesn't also work with the predefined widgets with appropriate adjustments.