Fix facet search when using sortBy

Author: bidoubiwa

packages/instant-meilisearch/src/client/instant-meilisearch-client.ts

@@ -146,8 +146,6 @@ export function instantMeiliSearch(
 
         const meilisearchSearchQuery = adaptSearchParams(searchContext)
 
-        const index = request.indexName
-
         const meilisearchRequest: any = {
           ...meilisearchSearchQuery,
           facetQuery: request.params.facetQuery,
@@ -157,7 +155,7 @@ export function instantMeiliSearch(
         delete meilisearchRequest.indexUid
 
         const meilisearchResponse = await meilisearchClient
-          .index(index)
+          .index(searchContext.indexUid)
           .searchForFacetValues(meilisearchRequest)
 
         const facetHits = meilisearchResponse.facetHits.map((facetHit) => ({

packages/instant-meilisearch/src/contexts/search-context.ts

@@ -66,7 +66,9 @@ export function createFacetSearchContext(
   options: InstantMeiliSearchOptions
 ): SearchContext {
   // Split index name and possible sorting rules
-  const [indexUid, ...sortByArray] = searchRequest.indexName.split(':')
+  const { indexUid, sortBy } = separateIndexFromSortRules(
+    searchRequest.indexName
+  )
   const { params: instantSearchParams } = searchRequest
 
   const paginationState = createPaginationState(
@@ -75,16 +77,15 @@ export function createFacetSearchContext(
     instantSearchParams?.page
   )
 
-  const sortState = splitSortString(sortByArray.join(':'))
-
   const searchContext: SearchContext = {
     ...options,
     ...instantSearchParams,
-    sort: sortState,
+    sort: splitSortString(sortBy),
     indexUid,
     pagination: paginationState,
     placeholderSearch: options.placeholderSearch !== false, // true by default
     keepZeroFacets: !!options.keepZeroFacets, // false by default
   }
+
   return searchContext
 }

playgrounds/local-react/cypress/integration/search-ui.spec.js

@@ -36,15 +36,26 @@ describe(`${playground} playground test`, () => {
     cy.get(HIT_ITEM_CLASS).eq(0).contains('9.99 $')
   })
 
-  it('Sort by recommendationCound ascending', () => {
+  it('Sort by recommendationCount ascending', () => {
     const select = `.ais-SortBy-select`
     cy.get(select)
       .select('games:recommendationCount:asc')
       .should('have.value', 'games:recommendationCount:asc')
     cy.wait(1000)
+    cy.contains('Most Recommended')
     cy.get(HIT_ITEM_CLASS).eq(0).contains('Deathmatch Classic')
   })
 
+  it('Facet search on genres when sorting by recommendationCount', () => {
+    cy.get('.left-panel')
+      .find('.ais-SearchBox-input')
+      .first()
+      .type('drama')
+      .should('have.value', 'drama')
+
+    cy.get('.left-panel .ais-RefinementList-labelText').eq(0).contains('Drama')
+  })
+
   it('Sort by default relevancy', () => {
     const select = `.ais-SortBy-select`
     cy.get(select).select('games')