Shortkey doesn't work when v-textarea is focused

Question

I have a small problem. The shortkey (plugin) cannot be executed on the buttons once textarea has focus.

... => Non-relevant 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>

Both methods never executed when you are focused. Does anybody have a solution?

I want to execute confirm method if you click 'alt' and 'enter', even focused on textarea. I want to execute abort method if you click 'esc', even focused on textarea.

Answer 1

One way to do this is to add an event listener in the js part of the compoenent.

This will catch all keys pressed on the keyboard you can check what key is pressed with the parameter that comes with the event.

Caution this will listen to all key presses not only when focused on button/textarea.

Answer 2

You can use the keyup event handler to do this. Like this:

<textarea @keyup.esc="abort" @keyup.alt.enter="confirm" />

You can see more examples here . And you can also create custom key modifiers, see here