hey everyone, I am using vue-instantsearch with typesense and I have sort by functionality implemented using ais sort. When we click on the dropdown and choose different options it sorts the items properly but whenever I scroll to top just above where my catalog starts it sort the items again with a default sort by value given during initialisation. I checked the code too for any trigger which might be causing this but there wasn’t. Also weird thing I noticed the initial load with default order looks different when it gets triggered after selecting different order and scrolled above again while the query looks same in both cases.

Hmm that sounds strange, I haven't seen this issue before. If you're able to put together a minimal example in codesandbox that reproduces the issue, I can help debugging it

Sure I can send you a live link where you can check this out.

Are you using a custom infiniteHits widget?

yes

It looks like there might be some issue with how it appends results from newer search requests to the list of existing results on the page, which is what is making it seem like the sorting is off

Yeah, I tried even after commenting the refineNext function which triggers next items and then tried sorting. Even after doing that if we scroll slight down and come back to top the sort changes to default sort.

Looks like the sort by widget is also custom and it's not persisting the previously chosen sort order for infinite scroll...

You are right I am using custom ais-sort also with refine() which is applied once we click on the Apply

For good measure, could you try upgrading to the latest vue-instantsearch?

Yeah let me check that

Are you able to reproduce this in a standalone app in codesandbox? If I can have access to the sandbox source and I can run it quickly, I can try tinkering with it

I haven’t tried it as It might take some time to shift this code to a codesandbox.

Just a minimal one would do, just enough to replicate the issue

Sure

@Ketan Ishaan Sure, as long as I can run the app standalone. My github handle is

jasonbosco

. You should be able to add by username

I have shared the repository and it can be run standalone. Thanks

I see this error:

➜  typesense-catalog git:(main) yarn develop
yarn run v1.22.18
$ yarn run env-dev && nuxt
$ cp -r ./environments/development/. .
cp: ./environments/development/.: No such file or directory
error Command failed with exit code 1.
info Visit <https://yarnpkg.com/en/docs/cli/run> for documentation about this command.
error Command failed with exit code 1.
info Visit <https://yarnpkg.com/en/docs/cli/run> for documentation about this command.

@Jason Bosco my bad I forgot to add the env file. Can you check again should work now?

@Ketan Ishaan If I comment out this line of code, the issue stops happening:

async beforeMount() {
    // window.addEventListener("scroll", this.stickyOnScroll);
  },

Thank you so much for pointing that out. Also I have noted something odd once you apply sort and then call any method which changes value in data results in making the sort to come to default again. To try this I removed the above code and then I simply added a button at the top which just switches the scroll button flag

displayScrollIcon

(to hide or unhide). When you will click on the button it resets the sort. So my guess is it does not persist the sort if any method outside the ais component is executed even if it’s a small switching of a value from true to false.