Angular: Как вы фокусируете вход в меню ngbDropdown? - PullRequest
Новая
       3

Angular: Как вы фокусируете вход в меню ngbDropdown?

0 голосов
/ 07 апреля 2020

Я пытаюсь использовать ElementRef, чтобы сосредоточиться на входе. Это работает нормально, за исключением выпадающего из библиотеки ng- bootstrap. Как вызвать событие в ngbDropdown ?

Пример: https://stackblitz.com/edit/angular-z7q9xm

класс компонентов 

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'ngbd-dropdown-basic',
  templateUrl: './dropdown-basic.html'
})
export class NgbdDropdownBasic {
  @ViewChild("search") searchField: ElementRef;
  @ViewChild("searchOutside") searchFieldOutside: ElementRef;

  onToggle(dropDownOpen: boolean) {
    if (dropDownOpen) {
      this.searchField.nativeElement.focus();
    }
  }

  focusOtherField() {
    this.searchFieldOutside.nativeElement.focus();
  }
}

шаблон компонента 

<div class="row">
  <div class="col"><h3>Example 1: Inside dropdown <br>(not working)</h3></div>
</div>
<div class="row form-group">
  <div class="col">
    <div ngbDropdown (openChange)="onToggle($event)" class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <div class="p-2"><input #search name="search" class="form-control" placeholder="Search..."></div>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="row">
  <div class="col"><h3>Example 2: Outside dropdown</h3></div>
</div>
<div class="row form-group">
  <div class="col-auto"><button (click)="focusOtherField()" type="button" class="btn btn-outline-primary">Focus this field:</button></div>
    <div class="col">
    <input #searchOutside name="searchOutside" class="form-control" placeholder="Search...">
  </div>
</div>

1 Ответ

1 голос
/ 22 апреля 2020

Проблема в том, что в момент нажатия на раскрывающийся список и вызова вашего onToggle DOM еще не был обновлен для отображения раскрывающегося списка и ввода в раскрывающемся списке.

Что вы можете сделать вводит ChangeDetectorRef в компонент через конструктор: 

import { ChangeDetectorRef } from '@angular/core';
...

export class NgbdDropdownBasic {
  ...
  constructor(private _cdRef: ChangeDetectorRef) {}

и вызывает this._cdRef.detectChanges();, прежде чем сфокусироваться на вводе в вашем onToggle методе: 

onToggle(dropDownOpen: boolean) {
  if (dropDownOpen) {
    this._cdRef.detectChanges();
    this.searchField.nativeElement.focus();
  }
}

This приведет к раскрытию и вводу данных, так что при вызове this.searchField.nativeElement.focus(); он уже виден и получит фокус.

Пожалуйста, посмотрите этот StackBlitz для рабочей демонстрации.

...