Algolia Bug: Reset Filters (ais-clear-refinements) does not work after clicking Show More (refinenext)

Hi team,

I have observed a scenario wherein if a user clicks on “load more” when any filter is selected and then clicks “reset filters”, the ais-inifinite-hits does not display the updated results.

I have made a codesandbox-https://nvxkw.codesandbox.io/

Steps to reproduce: Select any filter (say GE), click on load more (at the bottom), and then click on “clear refinements” (on the top). This does not update the results even though the selected refinement is cleared.

How to solve this issue?

Hi zaheer,
Thank you for reaching out to Algolia Support.

This will be definitely fixed in coming Angular-InstantSearch@3 (which is currently in a beta).

In the meantime, there is a workaround for you. It’s basically copy paste clearRefinements component with an extra line, which is resetting the page to 0.

import { Component, Inject, forwardRef, Input } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
import { connectClearAll } from 'instantsearch.js/es/connectors';

@Component({
  selector: 'custom-clear-refinements',
  template: `
    <div
      [class]="cx()"
      *ngIf="!isHidden"
    >
      <button
        [class]="cx('button') + (!state.hasRefinements ? (' ' + cx('button', 'disabled')) : '')"
        (click)="handleClick($event)"
        [disabled]="!state.hasRefinements"
      >
        {{buttonLabel}}
      </button>
    </div>
  `,
})
export class CustomClearRefinements extends BaseWidget {
  @Input() public buttonLabel: string = 'Clear refinements';
  @Input() public clearsQuery: boolean = false;
  @Input() public excludeAttributes: string[] = [];

  public state = {
    hasRefinements: false,
    refine: () => {},
  };

  get isHidden() {
    return !this.state.hasRefinements && this.autoHideContainer;
  }

  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent: any
  ) {
    super('ClearRefinements');
  }

  public ngOnInit() {
    // we need to `createWidget` from `ngOnInit` to have `@Input()` intialized
    this.createWidget(connectClearAll, {
      clearsQuery: this.clearsQuery,
      excludeAttributes: this.excludeAttributes,
    });

    super.ngOnInit();
  }

  public handleClick(event: MouseEvent) {
    event.preventDefault();

    if (this.state.hasRefinements) {
      (this.state as any).instantSearchInstance.helper.setPage(0);
      this.state.refine();
    }
  }
}

To know more about customizing widgets, please refer to this document.

I hope this helps you.
Please let us know if you have further question.

Best regards,
Eunjae