Topic: mdb autocompleter lose focus after remote api calls

xhuang free asked 4 years ago

Hi, In order to search and select, I changed the mat-autocomplete in 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:

Konrad Stępień staff commented 4 years ago

Hi @xhuang,

Could you make me a project on GitHub?

It seems the snippet does not include every file.

rhaouari free answered 3 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 ' ">
            <label >{{article.articleName}}

  searchText = new Subject();

ngOnInit() {
      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 !== ' ' ) {
     return this.articleService.searchArticles(filterValue.trim()); // the API Call
   } else {
     return Observable.empty();


Arkadiusz Idzikowski staff commented 3 years ago

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

rhaouari free commented 3 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.


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



Specification of the issue

  • ForumUser: 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