Why isn't this method getting triggered by a @keyup event?

Question

I'm trying to focus a text field on ALT + C shortcut (in my Electron-Vue app):

Codepen: https://codepen.io/anon/pen/aqrBzq?editors=1010

The codepen uses this v-text-field custom component and as this comment on Github says, the method should be wrapped with $nextTick in order to focus this component

Need this, but doesn't work

 <v-text-field
   ref="filter"
   @keyup.alt.67="focusFilter" 
   label="type here" >
 </v-text-field>

 ...

 methods: {
   focusFilter(event){
     this.$nextTick(event.target.focus)
   }
 }

This works, but is not what I need:

I also tried this code below, trying to focus it with a button, and it works, but I want to make it work with a key shortcut (for example ALT + C but more preferably CTRL + F, but for the sake of example I don't use reserved shortcut)

 <v-btn @click="focusFilter()">focus</v-btn>

 ...

 methods: {
   focusFilter(event){
     this.$nextTick(this.$refs.filter.focus)
   }
 }

score 5 · Accepted Answer · edited Jul 15 '22 at 05:12

5

When you're listening for a native event on a component you need to use the .native modifier.

So use this instead:

@keyup.native.alt.67="focusFilter"

Details here: https://v2.vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components

If you want to focus this input when alt+c is pressed and anything is focused you'd need to add an event handler to window for keyup.

I'd created a method to focus it under the right circumstances like:

methods: {
  listenForFocusFilterShortcut (event) {
    if (event.keyCode === 67 && event.altKey) {
      this.$refs.filter.focus()
    }
  },
}

Then, add a created hook and attach this callback to the window when there's a keyup event.

created () {
  window.addEventListener(
    'keyup',
    this.listenForFocusFilterShortcut
  )
},

Then, remove the event listener when the component is removed:

destroyed () {
  window.removeEventListener(
    'keyup',
    this.listenForFocusFilterShortcut
  )
}

edited Jul 15 '22 at 05:12

tony19

125,647
18
229
307

answered Mar 04 '18 at 22:51

Bill Criswell

32,161
7
75
66

Thanks for the answer. Though it still doesn't work. Could you please check out the codepen, do you see any other mistakes there? maybe in the `methods: { }` ? – Un1 Mar 04 '18 at 22:57
`this.$nextTick(event.target.focus)` isn't right, should be `this.$nextTick(() => event.target.focus())`. `event.target.focus` doesn't return a function like `$nextTick` expects. If you look at the console with the `.native` modifier added you'll see the invalid invocation. – Bill Criswell Mar 04 '18 at 23:04
It's odd that it gives me the "Illegal invocation" only when I focus the filed manually and only then press `ALT + C`. It's like it doesn't even listens for `ALT + C` until it's selected. What's the point of it then – Un1 Mar 04 '18 at 23:17
You'd need to wait for that event on the window. A keyup will only fire on the "active" element then bubble up to window unless you stop it. I'll add to my answer how I'd approach it. – Bill Criswell Mar 04 '18 at 23:22
Nice, it works now. Thank you for helping me (and potentially others) to understand it and for the provided example code that actually works! – Un1 Mar 04 '18 at 23:31
No problem at all! – Bill Criswell Mar 04 '18 at 23:31

Why isn't this method getting triggered by a @keyup event?

Need this, but doesn't work

This works, but is not what I need:

1 Answers1