如何在带有自动完成功能的 mat-select 的搜索框中设置焦点？

Question

I used following angular component in my form to add autocomplete feature to angular material select component with multiple selection feature: https://github.com/malothnaresh/mat-select-autocomplete

It is working properly and I can search the list of options for selection. But now I need that when I click on the list, the focus should be in the search box displayed on top of the list options(above first option in the list) by default, instead of any selected option in the list(current behavior). Because as for now if the list is long then I have to scroll upwards and then click in the search box before starting to search for any specific option.

Can anyone suggest me any solutions for settings focus on the search box.

The angular code I applied to use the autocomplete component is given below.

 export type ListOption = { displayName: string, value: number } itemList: ListOption[] = []; itemValues: any[] = []; // Refer the multi-select list with viewchild @ViewChild(SelectAutocompleteComponent) multiSelect: SelectAutocompleteComponent; ngOnInit(): void { this.itemList.push({ displayName: 'item1', value: 1 }); this.itemList.push({ displayName: 'item2', value: 2 }); ... getList(event) { this.itemValues = event; } onClick() { //I tried to set focus using this code. But I know it will not work. As I still need to fetch reference of the inner search text box. let innerControl = this.multiSelect.selectElem; innerControl.focused = true; } }

 <mat-select-autocomplete appearance="outline" name="myList" [required]='true' [placeholder]="'Select item(s):'" [options]="itemList" [multiple]='true' [display]="'displayName'" [value]="'value'" [selectedOptions]="itemValues" (selectionChange)="getList($event)" (click)="onClick()"> </mat-select-autocomplete>

Answer 1

You can focus manually:

Add an id so you can select it with document.getElementById

<mat-select-autocomplete id="autocomplete" ...

Then focus the select with:

document.getElementById('autocomplete').focus();