mdb autocompleter lose focus after remote api calls


Topic: mdb autocompleter lose focus after remote api calls

xhuang asked 5 years ago

Hi, In order to search and select, I changed the mat-autocomplete in https://github.com/OasisDigital/angular-material-search-select/blob/master/README.md to mdb-auto-completer.

Expected behavior: input field stay focused after remote api calls.

Actual behavior: input field lose focused after remote api calls, user need to click on the input in order to enter more characters to search.

code snippets: https://mdbootstrap.com/snippets/angular/xhuang/2050313


Konrad Stępień staff commented 5 years ago

Hi @xhuang,

Could you make me a project on GitHub?

It seems the snippet does not include every file.


rhaouari answered 4 years ago

Hi , I'm facing the same problem , but only on mobile devices , works like a charm for desktop. for mobile browser the input looses focus after the http call .

    <mdb-option *ngFor="let article of results | async" [value]="article.articleName">
      <div class="row p-2">
        <div class="col-2"><img width="40" height="40" [src]="article.resourceUrl"></div>
        <div [class]="'col-8 text-justify ' ">
          <a
            [routerLink]="['/fpub/products/product/',article.id]"
            href=""
            (click)="hideResults()">
            <label >{{article.articleName}}
            </label>
          </a>
        </div>
      </div>
    </mdb-option>
  </mdb-auto-completer>

  searchText = new Subject();

ngOnInit() {
this.searchText.pipe(
      startWith(''),
      map((value: string) => this.filter(value))
    ).subscribe(r => {
      this.results = r;
      // this.txtSeachArticleM?.nativeElement?.focus();
    });
}

 filter(value: string): Observable<Article[]> {  
       const filterValue = value.toLowerCase();



  if (filterValue && filterValue !== ' ' ) {
     this.eventsTrackingService.searchEvent(filterValue.trim());
     return this.articleService.searchArticles(filterValue.trim()); // the API Call
   } else {
     return Observable.empty();
   }
 }


}

Arkadiusz Idzikowski staff commented 4 years ago

@rhaouari Can you add more information about the browser (and its version) and the device on which you tested that?


rhaouari commented 4 years ago

it only happens with chrome mobile view , but i noticed that it works correcly on emulator mobile device or real device.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.10.1
  • Device: Windows 10
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes