Autofocus on kendo-autocomplete control

[rk]

 Hi,

I have a 'kendo-autocomplete' control on my app. Trying to set auto focus (element highlighted) on page load.  Using native javascript was able to track down the HTML element , but cannot fire 'click' / 'focus' events on them. Can you please help ?

I have seen a jquery post achieving the same , by calling .data('kendo-autocomplete). https://stackoverflow.com/questions/17152915/setting-focus-on-autocomplete-textbox

Here's what I tried ->

1. let searchInput: HTMLElement = document.getElementsByClassName('customClass')[0] as HTMLElement;

     searchInput.click(); //doesn't fire

 

2. Native Angular way -> Doesn't even find the element on DOM.

    <kendo-autocomplete #findMe>

     @ViewChild('findMe') searchInput: ElementRef;

     ngAfterViewInit() {

            this.searchInput.nativeElement.focus();    //searchInput is not defined. 

     }

[Svet]

Hi Ramakrishna,

Indeed, using custom JavaScript logic we can use the focus method of an HTML element. We can also get a reference to the AutoComplete component via Angular's @ViewChild and call its focus method as well.

Check the following sample plunker demonstrating both approaches:
https://plnkr.co/edit/C7uXYE4rgYZ8xsKN7pJV?p=preview

I hope this helps.

Regards,
Svetlin
Progress Telerik