Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

uiState not updating properly after calling setUiState #949

Open
DimplocetY opened this issue Apr 5, 2022 · 2 comments
Open

uiState not updating properly after calling setUiState #949

DimplocetY opened this issue Apr 5, 2022 · 2 comments

Comments

@DimplocetY
Copy link

DimplocetY commented Apr 5, 2022

I am currently doing an implementation of Algolia in an angular project. And created a component as below:

<ais-instantsearch [config]="config" class="algolia-search-box">
  <ais-configure [searchParameters]="searchParameters"></ais-configure>
  <div class="cx-sorting top">
    <div class="row"></div>
  </div>
  <ais-sort-by
    [items]="[
      { value: 'Index_en', label: 'Featured' },
      { value: 'Index_en_price_asc', label: 'Price asc.' }
    ]"
  ></ais-sort-by>
  <ais-hits>
    <ng-template let-hits="hits">
      <ais-pagination></ais-pagination>

      <ol class="ais-Hits-list">
        <li class="ais-Hits-item" *ngFor="let item of hits">
          <algolia-hit-item-large [product]="item"></algolia-hit-item-large>
        </li>
      </ol>
    </ng-template>
  </ais-hits>
</ais-instantsearch>

When initially searching everything is working fine, but when I try to sort or change the page I have to change/click twice before the hits list updates.
I also tried to use the onStateChange, but the setUiState() method does not seem to work.
onStateChange({ uiState, setUiState }: any) { console.log(uiState); setUiState(uiState); },
Here the uiState seems to be correct (what it should be after the change).
We are on following version:
"angular-instantsearch": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/angular-instantsearch/-/angular-instantsearch-4.1.0.tgz", "integrity": "XXX", "requires": { "instantsearch.css": "^7.3.1", "instantsearch.js": "^4.31.1", "nouislider": "^10.0.0", "querystring-es3": "^0.2.1", "tslib": "^2.1.0" } },

@Haroenv
Copy link
Contributor

Haroenv commented Apr 5, 2022

I can't reproduce this in our sample, https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/angular-instantsearch?file=/src/app/app.component.html, could you edit it to show the issue you're having?

@DimplocetY
Copy link
Author

I also was not able to reproduce the issue in the sample. As our project is a Sap spartacus one, the issue seems to be caused by the changeDetectionStrategy. We were able to solve the issue by adding a changeDetectionRef.detectChanges() on the (change) of the ais-instantsearch. However now we are trying to convert the project to use one global ais-instantsearch tag instead of one per component. In doing this our previous change stops working and the issue returns.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants