поле со списком kendo ui открыто в фокусе

Question

Я делаю указание, чтобы кендо-комбо-бокс открывал свое меню при получении фокуса. Вот что я получил до сих пор:

import { Directive, ElementRef, HostListener } from '@angular/core';
import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns'

@Directive({
  selector: 'kendo-combobox[openOnFocus]'
})
export class OpenOnFocusDirective {
  private combobox: ComboBoxComponent;
  constructor(el: ElementRef) {
    this.combobox = el.nativeElement as ComboBoxComponent;
  }

  @HostListener('focus') onFocus() {
    this.combobox.toggle(true);
  }


  @HostListener('blur') onBlur() {
    this.combobox.toggle(false);
  }
}

html:

<kendo-combobox openOnFocus ...>
</kendo-combobox>

Однако команда «toggle» ничего не делает. Чтение документации подсказывает мне, что раскрывающийся список должен открываться (или закрываться).

https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/ComboBoxComponent/

Любая помощь будет очень принята!

Answer 1

Это мое рабочее решение для расширения раскрывающегося списка при фокусировке на компоненте combobox:

Директива:

import { Directive, HostListener, Input } from '@angular/core';
import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';

@Directive({
  selector: 'kendo-combobox[openOnFocus]'
})
export class OpenOnFocusDirective {

  @Input() openOnFocus: ComboBoxComponent;

  @HostListener('focus') onFocus() {
    this.openOnFocus.toggle(true);
  }

  @HostListener('blur') onBlur() {
    this.openOnFocus.toggle(false);
  }
}

Html:

<kendo-combobox #comboboxComponent [openOnFocus]="comboboxComponent" ...">
</kendo-combobox>

Использование собственного элемента дает мне не компонент, а элемент html. Вот почему переключатель не определен и не работает.

Использование viewchild также не является вариантом, поскольку сама директива не имеет дочернего элемента типа comboboxComponent.

Answer 2

Попробуйте использовать ViewChild вместо ElementRef

export class OpenOnFocusDirective {
   @ViewChild(ComboBoxComponent) public combobox;

   @HostListener('blur') onBlur() {
      this.combobox.toggle(false);
   }