uiState not updating properly after calling setUiState

[DimplocetY]

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]

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]

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.