Topic: mdb autocompleter lose focus after remote api calls
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
                                                    
                                                    rhaouari
                                                                                        answered 5 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 5 years ago
@rhaouari Can you add more information about the browser (and its version) and the device on which you tested that?
rhaouari commented 5 years ago
it only happens with chrome mobile view , but i noticed that it works correcly on emulator mobile device or real device.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
Konrad Stępień staff commented 6 years ago
Hi @xhuang,
Could you make me a project on GitHub?
It seems the snippet does not include every file.