Estoy usando el paquete ng-multiselect-dropdown ( https://www.npmjs.com/package/ng-multiselect-dropdown ) en mi proyecto angular. Todo funciona bien, pero quiero enfocar el campo de entrada del filtro automáticamente cuando abro el menú desplegable de selección múltiple.
Aquí está mi código 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>Y aquí están mis configuraciones para la selección múltiple:
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', };El proyecto no tiene esta función internamente, debe escribir a su manera. ¡Estoy usando una directiva y obteniendo el elemento de entrada usando querySelector y enfocando la entrada!
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(); } } }