javascript - 单击时自动聚焦 ng-multiselect-dropdown 的 Filterfield

Question

我在我的 Angular 项目中使用了 ng-multiselect-dropdown 包 ( https://www.npmjs.com/package/ng-multiselect-dropdown )。一切正常，但我想在打开多选下拉菜单时自动聚焦过滤器输入字段。

这是我的 html 代码:

<div class="input-group" style="display: flex">
                <span class="input-group-text"><i class="fas fa-building"></i></span>
                <ng-multiselect-dropdown style="flex: 1"
                                         [placeholder]="'Unternehmen'"
                                         [data]="this.companies"
                                         [formControl]="filterCompany"
                                         [settings]="dropdownSettingsCompanies"
                                         (onFilterChange)="updateCompanyList($event)"
                                         (onSelect)="onItemSelect($event)">
                </ng-multiselect-dropdown>
</div>

这里是我的多选设置:

dropdownSettingsCompanies: any = {
        singleSelection: false,
        idField: 'id',
        textField: 'name',
        showSelectedItemsAtTop: true,
        clearSearchFilter: true,
        allowSearchFilter: this.ShowFilter,
        enableCheckAll: false,
        allowRemoteDataSearch: true,
        searchPlaceholderText: 'Bitte geben Sie einen Suchbegriff ein',
    };

Answer 1

项目内部没有这个功能，需要自己写。我正在使用指令并使用 querySelector 获取输入元素并聚焦输入!

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appFocusOnClick]',
})
export class FocusOnClickDirective {
  constructor(private elementRef: ElementRef) {}

  @HostListener('click', ['$event.target'])
  onClick(btn) {
    console.log('button', btn, 'number of clicks:');
    const input = this.elementRef.nativeElement.querySelector(
      '.filter-textbox > input'
    );
    if (input) {
      input.focus();
    }
  }
}

stackblitz