Possible infiniteHits load more bug

Open Q&A
#1

I’m been experiencing a potential bug with infiniteHits and I think it’s related to this GitHub issue.

Expected behaviour: when a user clicks on the load more button, new results are shown. When the user clicks on a result they are taken to a new page. When the user clicks the back button, they are taken back to their previous position in search results.

This works in the latest versions of Safari and FireFox, but not in Chrome and Brave. Instead, the user is taken to the bottom of the page.

I’m using Algolia CSS, v7.4.5, which has the fix provided in the GitHub issue so this may be a different bug?

.ais-InfiniteHits-loadPrevious,
.ais-InfiniteHits-loadMore,
.ais-HierarchicalMenu-showMore,
.ais-Menu-showMore,
.ais-RefinementList-showMore {
overflow-anchor: none; }

My code

const search = instantsearch({
  indexName: 'index',
  searchClient: algoliasearch(
    '1234',
    '5678'
  ),
  routing: {
    stateMapping: instantsearch.stateMappings.singleIndex('index')
  }
});

const sessionStorageCache =
  instantsearch.createInfiniteHitsSessionStorageCache();

instantsearch.widgets.infiniteHits({
  cache: sessionStorageCache,
  container: '#infinite-hits',
  templates: {
    empty: `...`,
    item: `...`
  }
})

Just bumping this post as I’m still experiencing this issue and would welcome any suggestions on how can I fix/troubleshoot.

#2

Could you reproduce a minimal case in CodeSandbox so we can have a better idea of the issue you are facing ? You can use this template as a starting point: https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/instantsearch.js?file=/src/app.js

#3

Hi Yannick,

Appreciate the reply. I had difficulties with using your template, but I’ve created a super simple github repo which you can find here.

In the repo, I’m not able to reproduce my issue, which is that when you click on a product item and then use the back bottom, search does not remember the user’s position. Instead the user ends up at the bottom of the page, the footer…

In my repo example, the opposite happens. The user ends up at the top of the page. Perhaps you can see if there’s a problem in my code?

I hope what I’ve written you understand. I can otherwise try to example in a different way. thank you.

#4

I notice that you remove page from the URL. The cache will actually look at what is in the URL and then show the relevant page, if it’s not in the URL, it will always show the first page. Hope that makes sense!

1 Like
#5

It does. Thank you.

Silly question, as I assume no, but is there a way to hide the page from showing in the url, but still have caching work as intended?

#6

Unfortunately this is a tradeoff we had to make, the page needs to be read for the cache to make sense, otherwise regardless of which page is shown would be showing the cache

1 Like
#7

I understand. Thank you.

I’ll mark this as solved. I’ll change my implementation and if something comes up and I’ll be back :slight_smile:

1 Like