Issue
I want to create a search field and to do so I followed this tutorial, which shows how to create and use filter pipe.
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if(!items) return [];
if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
return it.toLowerCase().includes(searchText);
});
}
}
<mat-menu #accountsMenu="matMenu">
<div (click)="$event.stopPropagation()">
<mat-form-field>
<span matPrefix><mat-icon>search</mat-icon></span>
<input
matInput
[formControl]="accountSearch"
placeholder="search text goes here"
/>
</mat-form-field>
<button
*ngFor="let c of accounts | arrayFilter: accountSearch.value"
mat-menu-item
(click)="selectAccount(c)"
>
{{ c.Name }}
</button>
</div>
</mat-menu>
<div
[matMenuTriggerFor]="accountsMenu"
>
Click to show menu
</div>
The filtering works, however search field loses focus. I've tried to use trackBy since it was adviced by some sources, however it didn't work for me.
Update: I've found that when I remove 'mat-menu-item' from button, input does not lose focus, but I need it. What should I do it?
Update 2: reproduced issue is available here
Solution
Could you please provide us a sample of code to repoduce the problem?
I have followed the instructions of the tutorial and everything seems to working correctly.
Check working example HERE
UPDATE:
The problem was at
<button mat-menu-item...
There was an issue on focus input field when using mat-input-item attribute on button.
If you replace the mat-input-item with the mat-button focus will remain from now on.
Updated example here
Answered By - Themistoklis Bogiatzoglou
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.