SortBy Index not listed/found

[3Descape]

Description
I've set up a search client with
<ais-instant-search index-name="customers">
and sorting with
<ais-sort-by :items="[{ label: 'Access', value: 'customers:accessed_at:desc' }]">

When loading the page I get the warning:
[InstantSearch.js]: The index named "customers" is not listed in the items of sortBy.
and the sorting doesn't work(the items appear in the default order).

Putting the :items into the vue data object also didn't help as suggested in e.g. algolia/vue-instantsearch#575

However:
When setting the index name to be equal to the sortBy value:
<ais-instant-search index-name="customers:accessed_at:desc">
it works. E.g. the items are sorted and no warning(Side node: also the router now shows the sorting in the query param, as excpected).

Expected behavior
The user should not be required to specify the sorting attributes on the index-name attribute for sorting to work.

Screenshots or Logs

Index set to "customers". A warning and no sorting(e.g. Peter Schlager was accessed after Jana Karl2 but is listed lower)

Index set to "customers:accessed_at:desc" and the sorting works.

Environment (please complete the following information):

• OS: Windows 10
• Browser: Firefox 100.0
• Meilisearch version: v0.26.1
• instant-meilisearch version: v.0.7.0
• vue-instantsearch version: v4.3.3
• Vue.js version: v3.2.33

Used in laravel 9.10 with the package laravel/scout 9.4

[CaroFG]

Hi @3Descape! Unfortunately, I have not been able to reproduce your issue. We are actually using the sortBy widget in the MoMA demo. You can check the code in the demos repo

[3Descape]

Hey ;)

I created a quick barebone setup now and I still get the same behaviour.
https://github.com/3Descape/MeiliBug

The component of intrest is in resources/js/components/Meili.vue

This is a laravel project.
So get everything running you need a php >= 8.0.2 setup and a database compatible with laravel(you can change that in the .env, I used mysql)

To run the project:
composer install
npm install(if you wanna build js/scss by yourself)

copy the .env.example to .env

Migrate mysql database(named "meilibug", change it in the .env if you want)
php artisan migrate:fresh --seed(sets up tables, with data + adds the accessed_at_sortable timestamp representation of the accessed_at field of the customer to the updateSortableAttributes) (see database/migrations/2022_04_27_112602_create_customers_table, and app/Http/Resources/CustomerResource)

(Optionally if you want to compile the js and scss): npm run dev / npm run prod / npm run watch

in the folder of the project:
php artisan serve
to start a dev server.

I hope I didn't miss a step ^^, if so, please let me know if there is anything I can help you with.

Additional Resources for setup:
https://laravel.com/docs/9.x/scout#meilisearch
https://laravel.com/docs/9.x/database#configuration

[CaroFG]

Hi again @3Descape,

Thank you for the example and the thorough step explanation. It was indeed my first time running a PHP project 🥳
Indeed, there's a bug. The sortBy doesn't seem to work when there is just one option to sort by, it works with:

        <ais-sort-by
            :items="[
                { value: 'customers:accessed_at_sortable:desc', label: 'desc.' },
                { value: 'customers:accessed_at_sortable:asc', label: 'asc.' }
            ]"
        />

[3Descape]

Hi again @CaroFG
I'm glad the explanaitin helped :)

I tested it now, but I think I slowly start to understand where the problem comes from..
I don't think it's a bug related to the amount of items in the list.

So here is my observation:
I now have two options for my sorting, like you showed in your previous comment.

If I change the index-name="customers:accessed_at_sortable:desc" to index-name="customers", I still get the same waring + the items are not sorted. But as soon as I select the second sort option(lable: asc. in the example from your message above), the sorting updates and I have no waring in the console(aka. "[InstantSearch.js]: The index named "customers" is not listed in the 'items' of 'sortBy'.").

So my guess based on this is: if I set the the index-name="customer", I tries to find the key "customer" in the sort-by items list
so it expects to find
{ label: 'some label', value: 'customers' }

But in only finds

{ label: 'some label 1', value: 'customers:accessed_at_sortable:desc' },
{ label: 'some label 2', value: 'customers:accessed_at_sortable:asc' }

So no item with value: 'customer'.

By setting the index-name="customers:accessed_at_sortable:desc", the value is included in the list and therefore it sorts correctly. So index-name="customers:accessed_at_sortable:desc" kinda selects and sets "the default sorting option" in <ais-sort-by> and therefore the placeholder search request at the begining succeeds without warings.

So I think the issue is, that <ais-sort-by> does not set that "default sorting option" on initialization e.g. to the first ais-sort-by item?

So maybe let's reprase the question/my initial goal with this setup a little bit, because maybe I am just using it wrong and there is no bug after all:
What would be the "official" way to add initial sorting to the placeholder search? Because all I want to achieve is that the results are sorted by the accessed_at_sortable field for the placeholder search and the user doesn't have to be able to change that.

Thx for the support btw ;)
Appreciate it a lot

[CaroFG]

I am really sorry for the late reply 🙏 Indeed, probably the sortBy widget starts working only when you click on it. So if you need your docs to be sorted on initialization, you probably did the right thing from the beginning: setting the index name to be equal to the sortBy value.

[bidoubiwa]

Hey @3Descape ! Is this still an issue?

[3Descape]

@bidoubiwa not sure to be honest, since I refactored my application to a custom frontend