我需要使输入元素可聚焦.我的意思是,用户应该能够使用这个字段来筛选只使用键盘的值. 我添加了tabindex,但它的行为很奇怪.
https://stackblitz.com/edit/angular-db2km6-5a83e7?file=src%2Fapp%2Fselect-multiple-example.html个
任何帮助都将不胜感激.
我需要使输入元素可聚焦.我的意思是,用户应该能够使用这个字段来筛选只使用键盘的值. 我添加了tabindex,但它的行为很奇怪.
https://stackblitz.com/edit/angular-db2km6-5a83e7?file=src%2Fapp%2Fselect-multiple-example.html个
任何帮助都将不胜感激.
mat-select
组件只关注元素,它不输入,也不打开内部搜索字段来过滤它的值.
要实现这一点,您需要手动完成.我提供的Working stackblitz example中的主要更改如下:
HTML:个
<!-- 1. Added the id #field to reference the component later -->
<!-- 2. Added event `openAndSearch(field, multiUserSearch)` to fix the logic for the expected focus -->
<mat-select
#field
multiple
[formControl]="providers"
(openedChange)="onOpenChange(multiUserSearch)"
(focus)="openAndSearch(field, multiUserSearch)"
>...</..>
TS:个
/**
* Method to be executed when focus is triggered
**/
openAndSearch(field: MatSelect, input: HTMLInputElement) {
// Open and show the list of options
field.open();
// Focus the search input so the user can type directly
setTimeout(() => { // <-- inside timeout to wait for the overlay to show up
input.focus();
}, 10);
}