Can't change search parameters on ais-configure after clicking show more button in ais-infinite-hits

[ColinBrilliantLabs]

I'm using ais-configure to dynamically change my search parameters and update the hits in an ais-infinite-list. It works at first but when I click the show more button, my search parameters being changed will no longer update anything. Is there a way to have ais-configure and ais-infinite-hits work like that? If not, could I refresh ais-infinite-hits entirely in updateSearchParams()?

To Reproduce

Typescript: searchParameters = { filters: "status:published" }

//call this to update algolia search updateSearchParams(){ let filter = "status:unpublished:"; this.searchParameters = {filters: filter}; }

Html: <ais-configure [searchParameters]="searchParameters">

result stuff Show More

I'm using Angular 6 and ais-instantsearch 6.9.0

[ColinBrilliantLabs]

Update:

If I type in ais-search-box, it resets. If there's no other way to fix this right now, is there a way to update the ais-search-box text in code so I can set it's value to "a" and then set it back to ""?

[eunjae-lee]

Hi there, I'm not sure if I understand your issue correctly.

https://codesandbox.io/s/dreamy-zhukovsky-546og?file=/src/app/app.component.ts:396-440

Here's a codesandbox I've prepared for you. It shows how to use ais-configure to add some searchParamters. And ais-infinite-hits works fine and the searchParameters doesn't change.

Can you make some changes here to reproduce your issue?

[ColinBrilliantLabs]

I made an update to the code to add "filters" to the search parameters. I have my own UI (not a refinements-list) that changes the filters dynamically. I couldn't add the correct filter to your code because I didn't know what it would be on the backend so I added an example one ("brand:HP"). If I dynamically change the search parameters filter it works fine, but if I click the "Show more" button and then try to change the search parameters filters it doesn't do anything.

[eunjae-lee]

Thanks for providing more information. I've been testing it and found out the problem. It's because Angular InstantSearch is depending on an old version of InstantSearch.js which has a bug. ais-infinite-hits internally manages cache and there are case where it fails to invalidate it. We're preparing the next major version of Angular InstantSearch with the latest version of InstantSearch.js, but I'm sorry that I cannot promise the release date for it. So at the moment, you can unmount and re-mount the ais-infinite-hits component, then the internal cache will disappear.

Sorry for the workaround. Please let us know if you have any feedback or question!

[jamesamuel]

Have you got an expected release date on this?

[Haroenv]

No, sorry @jamesamuel, we don't have an expected ETA yet

[jamesamuel]

@Haroenv Have you got a working example of how to mount/unmount ais-infinite-hits?

[Haroenv]

https://codesandbox.io/s/loving-chatterjee-jj87h?file=/src/app/app.component.ts is an example, in angular you have to use *ngIf with a condition to cause a unmount-mount