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 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.
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 5 years ago
Hi @xhuang,
Could you make me a project on GitHub?
It seems the snippet does not include every file.