Search code examples
angulargoogle-chromehotkeys

For an Angular app, why do hotkeys not work in Chrome until the user interacts with the page

Using Angular I have various HostListeners listening for keydown:

@HostListener('window:keydown', ['$event'])
keyEvent(evt: KeyboardEvent) {
  console.log(evt)
}

I can see in the console logs that this is firing. But it won't fire until I interact with the page in some way (e.g. by clicking on it first) and after that it works great.

Is this expected behaviour? If not, how do I fix it such that the hotkeys work without the user first interacting with the page?

NB: On https://duckduckgo.com the arrows keys seem to work without interacting with the page - maybe this is just something to do with TabIndex?

NB: This problem exists in Chrome. I haven't tested in other browsers.

Solution

  • It's likely because they have an element (the input) auto focused. On your application call .focus() on the body.