Búsqueda de sitios web

javascript - Enfocar automáticamente el campo de filtro de ng-multiselect-dropdown cuando se hace clic


Estoy usando el paquete ng-multiselect-dropdown (https://www.npmjs.com/package/ng-multiselect-dropdown) en mi proyecto de Angular. Todo funciona bien, pero quiero enfocar el campo de entrada de filtro automáticamente cuando abro el desplegable multiselección.

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',
    };

Respuesta #1

El proyecto no tiene esta función internamente, necesitas escribir tu propia manera. ¡Estoy usando una directiva y obteniendo el elemento de entrada usando querySelector y enfocando el input!

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

Artículos relacionados