Encountering a strange issue while attempting to listen for keydown events in Vue.js.
The keydown event is attached to a div tag that surrounds the entire visible area:
<template>
<div class="layout-wrapper" @keydown="handleKeyDown"> // <--- keydown event here
<div class="workspace">
<animation-canvas class="animation-canvas"></animation-canvas>
<control-panel class="control-panel"></control-panel>
</div>
<dock class="dock"></dock>
</div>
</template>
Handling the event with a method that logs to the console and switches based on the pressed key:
handleKeyDown(event: KeyboardEvent) {
console.log('down');
switch (event.key) {
case 'ArrowLeft':
alert('left');
break;
case 'ArrowRight':
alert('right');
break;
}
Initially thought the event wasn't firing or the listener wasn't attaching correctly, but discovered that the keydown listener only works when an input element is active.
https://i.stack.imgur.com/PEycF.gif
What could be the missing piece here? Thought keydown event should work without requiring an active input element selected, right?