Q:

kendo ui combobox open on focus

I'm making a directive to ensure that the kendo-combobox wil open its menu when receiving focus.
This is what i got so far:
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>

However the "toggle" command is not doing anything.
Reading the documentation tells me it should open (or close) the dropdown.
https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/ComboBoxComponent/
Any help would be much appreciated!

A:

This is my working solution for expanding the dropdown when getting focus on the combobox component:
Directive:
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>

Using the native element does not give me the component but the html element. Which is why toggle was undefined and not working.
Using viewchild is also not an option as the directive itself does not have a child of type comboboxComponent.

