Expected behavior I have implemented the mdb-autocomplete and am facing one problem. After page load the first time the user clicks on the input bar the "textNoResults" message is displayed immediately even before the user has entered anything in the search bar. Is there a way to prevent this from happening.

My code is as follows:

 <div id="homeSearch" class="input-group ml-auto">
              <input
                type="text"
                class="completer-input form-control mdb-autocomplete mb-0"
                aria-label="Find tests"
                placeholder="Search by lesson or topic"
                [ngModel]="searchTopic | async"
                (ngModelChange)="searchTopic.next($event)"
                [mdbAutoCompleter]="auto"
                placement="top"
              />
              <div class="input-group-append">
                <div class="btn-group">
                  <button
                    type="button"
                    mdbBtn
                    color="default"
                    size="md"
                    class="z-depth-0"
                    mdbWavesEffect
                    (click)="getList()"
                  >
                    <mdb-icon fas icon="search"></mdb-icon>
                    Get List
                  </button>
                </div>
              </div>
              <mdb-auto-completer
                class="black-text"
                #auto="mdbAutoCompleter"
                textNoResults="Could not find matching results"
                [disabled]="enableSearch"
              >
                <mdb-option
                  *ngFor="let option of results | async"
                  [value]="option"
                >
                  {{ option }}
                </mdb-option>
              </mdb-auto-completer>
            </div>

TS Code

ngOnInit() {
    const self = this;
    this.results = this.searchTopic
      .pipe(debounceTime(1000), distinctUntilChanged())
      .pipe(
        map((value: string) => this.searchEntries(value))
      );
  }

searchEntries(term: string) {
    const filterValue = term.toLowerCase();
      let filteredResults = [];
      this.allResults.filter((data: any) => {
        if(data.toLowerCase().includes(filterValue))
        filteredResults.push(data);
      });
      return filteredResults;
    }
  }