Angular 8 - focus() to not work on Google Chrome

Question

I have been browsing around for a solution to my problem but I couldn't find any that works for me.

I have simple input box in my search.html template:

<input id="search-filter" #search type="search">

and I am trying to set the focus like this in my component search.ts:

export class SearchFilterComponent {
  @ViewChild('search', null) search: ElementRef;

  constructor() { }

  ngAfterViewInit() {
    this.search.nativeElement.focus();
  }
}

it works on IE and Firefox but not in Google Chrome. I have also tried to add a timeout as mentioned in other forum but it is still not working.

I have also tried from the Developer tools, F12 in the browser and typed:

window.setTimeout(function ()
    {
        document.getElementById('search-filter').focus();
    }, 200);

or the above without timeout - nothing happens. It's strange as when I do it from the console everything has been defintely loaded and rendered

Any suggestions? Thanks

question from:https://stackoverflow.com/questions/65883508/angular-8-focus-to-not-work-on-google-chrome

Answer 1

Waitting for answers