Algolia Angular InstantSearch buggy search-box

Question

I have my Algolia configuration set up correctly, and the ais-hits is correctly displaying the results of my query, but occasionally the text input will act very buggy.

Here is a recording of me typing the string cherry creek school district

I am not making any modifications to the ais-search-box element.

<div bh-card id="smart-search-dialog" class="w-screen max-w-lg">
    <ais-instantsearch [config]="config">
        <div>
            <ais-search-box placeholder="Search for anything..."></ais-search-box>
        </div>
        <div>
            <ais-index indexName="index-name">
                <ais-hits>
                    <ng-template let-hits="hits">
                        <div class="divide-y divide-slate-200 dark:divide-slate-700">
                            <a *ngFor="let hit of hits" [routerLink]="['...']">
                                <div class="label">{{hit.entity_name}}</div>
                                <div class="secondary-label text-sm">{{hit.entity_number}}</div>
                            </a>
                        </div>
                    </ng-template>
                </ais-hits>
            </ais-index>
        </div>
    </ais-instantsearch>
</div>

import { AfterViewInit, Component } from '@angular/core';
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch('********', '************************');

@Component({
  selector: 'app-smart-search-dialog',
  templateUrl: './smart-search-dialog.component.html',
  styleUrls: ['./smart-search-dialog.component.scss']
})
export class SmartSearchDialogComponent {

  config = {
    indexName: 'index-name',
    searchClient
  }

  constructor() { }

}

Versions:

"@angular/cli": "~13.0.4",
"algoliasearch": "^4.13.0",
"angular-instantsearch": "^4.1.0"

Any help on why this is happening?

Answer 1

I was able to reproduce this behavior! It's related to the <ais-index indexName="index-name"> you have wrapping your hits component. When I added this to my test app I saw a similar behavior with stuttering in the search box.

You shouldn't need this component if you search is only on a single index. The stuttering went away for me as soon as I removed it.

Here's my code that reproduced the problem:

      <div class="search-panel__results">
        <div class="searchbox">
          <ais-search-box placeholder="Search for anything..."></ais-search-box>
        </div>

        <ais-index indexName="instant_search">
          <ais-hits>
            <ng-template let-hits="hits" let-results="results">
              <div *ngIf="hits.length === 0">
                No results found matching <strong></strong>.
              </div>

              <ol class="ais-Hits-list">
                <li class="ais-Hits-item" *ngFor="let hit of hits">
                  <article>
                    <h1>
                      <ais-highlight attribute="name" [hit]="hit"></ais-highlight>
                    </h1>

                    <p>
                      <ais-highlight attribute="description" [hit]="hit"></ais-highlight>
                    </p>
                    <p>
                      <ais-highlight attribute="categories" [hit]="hit"></ais-highlight>
                    </p>
                  </article>
                </li>
              </ol>
            </ng-template>
          </ais-hits>
        </ais-index>

Tangentially, why are you loading the NgAisInstantSearch Angular Material component in your app.component.ts? I'm confused what you need it for?