Shortcut keys don't work when v-textarea is focused

Question

I have a small question. Once the text area has focus, shortcut keys (plugins) cannot be executed on the button.

... => Irrelevant content

<template>
    <div>
        <v-textarea ... />
        <div>
            <v-btn
             v-shortkey="['esc']"
             @shortkey="abort"
            >
            ...
            </v-btn>
             <v-btn
              v-shortcut="['alt', 'enter']"
              @shortkey="confirm"
             >
             </v-btn>
        </div>
    </div>
</template>

<script>
    methods: {
        abort() {
            console.log('aborted')
        }

        confirm() {
            console.log('confirmed')
        }
    }
</script>

Neither of these methods will be executed when you are focused. Does anyone have a solution?

If you click "alt" and "enter" I want to execute the confirm method and even focus on the text area. If you click "esc" I want to execute the abort method and even focus on the text area.

Answer 1

One way to achieve this is to add an event listener in the js part of the component.

This will capture all keys pressed on the keyboard. You can check what keys were pressed by passing the parameters attached to the event.

NOTE This will not only listen to all keypresses while focused on the button/textarea.