Vue: @keydown.tab captures shift + tab too

Created on 6 Mar 2017  ·  3Comments  ·  Source: vuejs/vue

@keydown.tab captures shift + tab too. Is this the expected behavour? If it's a bug, I'll make a repro.

Most helpful comment

Just to update this, since 2.5.0 vue has the .exact modifier, that prevents exactly this behaviour:

@keydown.tab.exact="dostuff()"

This will only work when tab is pressed, not when shift + tab ist pressed. See https://vuejs.org/v2/guide/events.html#exact-Modifier for more.

All 3 comments

Yes, it's expected. You should explicitly check that shift is not pressed

Here is the solution markup to accomplish this:

<your-element @keydown.tab="handleTabPress(someData, $event)"></your-element>

Inside the handler function, you can detect if SHIFT is held by examining the $event:

handleTabPress(someData, e) {
    // if SHIFT key is held to navigate backwards, exit through this gate
    if (e.shiftKey) {
        console.log('halting event due to SHIFT+TAB');
        return;
    }

    // otherwise, execute normal logic
    console.log('tab was pressed', someData);
},

Just to update this, since 2.5.0 vue has the .exact modifier, that prevents exactly this behaviour:

@keydown.tab.exact="dostuff()"

This will only work when tab is pressed, not when shift + tab ist pressed. See https://vuejs.org/v2/guide/events.html#exact-Modifier for more.

Was this page helpful?
0 / 5 - 0 ratings