Unable to give same key to different elements example : v-shortkey="['arrowdown']" on diff elements in same component

[madhuadbanker]

this issue is similar to issue #24 example only the last element with arrowdown works before elements with v-shortkey="['arrowdown']" not works is this feature not released or bug?

[fgr-araujo]

Hi! I will point it as a enhancement needed but I don't know if it's a good approach or not.

I think that you should have only one triggered shortcut and this shortcut trigger other actions inside his method. The same shortcut in more then one element sounds weird to me. Thinking about documentation it'll be something like "Use Ctrl+I to Save and Print"... u know..

So, can you show me your use case?

[madhuadbanker]

https://codesandbox.io/embed/z26y14lny3

I am getting "failed to resolve directive:shortkey" after i added vue-shortkey in this codesandbox. Before i got in my local i have restarted the system or reopned the node command prompt the error disappeared but this is the simple use case. Arrow down should work on both divs but works last event div"in this case second div list" i have tried many ways is there anyway to remove that event after passing first div. But as u mentioned "Use Ctrl+I to Save and Print" this is whole page level or document but like this same combination keys I am unable to give on different elements.

[fgr-araujo]

Let me know one thing: Did you try to trigger the arrow down only in the "div" with the focus?

[madhuadbanker]

No. But y we need to trigger the arrow down on div focus as we are specifying in div element right by giving directive as “arrowdoen” and the v-shortkey arrowdown working only on last element right

On Wed, Mar 20, 2019 at 6:42 PM Fagner Araujo notifications@github.com wrote:

Let me know one thing: Did you try to trigger the arrow down only in the "div" with the focus?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/iFgR/vue-shortkey/issues/78#issuecomment-475069908, or mute the thread https://github.com/notifications/unsubscribe-auth/ApPxw7yeB8ij3Hr4aAOgeHN6lOiYn9Q5ks5vYsdsgaJpZM4bwCZG .

[madhuadbanker]

I will try by giving trigger and check

On Wed, Mar 20, 2019 at 6:48 PM Madhu Latha Bandaru madhu@adbanker.com wrote:

No. But y we need to trigger the arrow down on div focus as we are specifying in div element right by giving directive as “arrowdoen” and the v-shortkey arrowdown working only on last element right

On Wed, Mar 20, 2019 at 6:42 PM Fagner Araujo notifications@github.com wrote:

Let me know one thing: Did you try to trigger the arrow down only in the "div" with the focus?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/iFgR/vue-shortkey/issues/78#issuecomment-475069908, or mute the thread https://github.com/notifications/unsubscribe-auth/ApPxw7yeB8ij3Hr4aAOgeHN6lOiYn9Q5ks5vYsdsgaJpZM4bwCZG .

[elodieburtin]

Hello!

+1 for this issue, I would definitely consider it an improvement.

Since a use case was requested, here is mine: I have several components in a page, each associated with a button, that can be triggered either by a click or by a shortkey. When the user uses a shortkey, it should only trigger a change in the active component. However, the active component does not necessarily have the focus (the situation is a bit more complex, and I store a variable in Vuex allowing to easily know if a component is active or not).

What I would like to do: Define my buttons in the following way: <button @click="buttonHandler" v-shortkey.once="['s']" @shortkey="buttonHandler">Click me</button> Then, in my buttonHandler method, check if the component is active, and if so, perform the desired action.

With the current behaviour of vue-shortkey, I could define a global element catching the desired shortkey, and then in its handler, emit an event or use Vuex in order to transmit the information to the components, but it seems more complicated to me, without added value (especially since I have in fact more than one button per component, each triggering their own changes, and should therefore handle several types of events). What do you think?

[tartinesKiller]

Hi! I have quite similar needs. In my case, I have a form with multiple items (fields). I want to be able to perform an action (fetch previously filled value for this field) when a shortkey is triggered, and keep the "context" of the currently focussed element, or at least the first parent which have a shortkey directive.

<template>
    <div id="form-item" v-shortkey="['ctrl', 'arrowleft']" @shortkey="shortkey">
      <input type="number" value="value" @input="val => $emit('input', val)" />
    </div>
</template>

<script>
export default {
    name: "FormItem",
    props: {
        item: {
            type: Object,
            required: true,
        },
        value: {
            type: Number,
            default: undefined,
        },
    },
    methods: {
        async shortkey () {
            const prevVal = await getPreviousValue(this.item.id);
            if (prevVal !== undefined) this.$emit('input', prevVal);
        }
    },
}
</script>

When the input have the focus, trigger the ctrl + arrowleft should call the shortkey() function of that form-item component, and thus call my method getPreviousValue() to get the previously filled value, with the form-item ID. (not a complete example) Do you think it would be an acceptable behaviour? I'm working on it and plan to make a PR if it's OK