Can we distinguish between 'down' and 'up' events in v-shortkey.push mode?

[yaakov2]

This package is great.

v-shortkey.push calls the handler twice: On key-down and on key-up. Is there any way how the handler can distinguish between the two calls (except for counting)?

If not --- can some data be added to the event argument to enable this distinction? This would help a lot.

[fgr-araujo]

Thanks! Well, you can use this sintax:

<button v-shortkey="{up: ['arrowup'], down: ['arrowdown']}" @shortkey="theAction">Joystick</button>

and you can pick it up like this:

methods: {
  theAction (event) {
    switch (event.srcKey) {
      case 'up':
        ...
        break
      case 'down':
        ...
        break

but honestly, I never tested whether with the push modifier it would work correctly.

I'll test and tell you...

[yaakov2]

@iFgR ---Thank you very much for your swift reply.

Unfortunately, there seems to be a misunderstanding about what I am asking. Maybe I should have phrased my question with "key press/key release" and not with "key down/key up".

I am not asking about how the "Arrow UP" and "Arrow Down" keys work with the push modifier. I have tested them and they work just like all other keys.

I am asking about key press and key release events: When you press, hold and release the space key, then

• The normal behavior is to trigger actions on key press and many repetitions while you hold the key.
• The -once modifier triggers the action on key release.
• The -push modifier triggers actions both on key press and key release -- but without distinguishing them.

I want to recognize the space key press event without any ambiguity. Can this be done with the current version --- and if not, can it be added to a later version?

[maximecolin]

I'm very interesting to know the answer. I would like to be able to know in the callback if the key was pressed or released.

I mapped the meta button (cmd button on apple keyboard) to an action toggling a boolean and if you press the key before the page is loading and release it after (for example during a page refresh with cmd+R), Vue will handle only the release event and the toggle is then reversed. It's very annoying.

Or maybe the toggle on keyup should not be triggered if there were no keydown catched before.

[fgr-araujo]

All the events is fired over the KEYUP event. You can detect the keyup and keydown event with .push modifier since this is a toggle feature.

If you can test this and give me a feedback, I would appreciate.

[yaakov2]

@iFgR -- Yes. The .push modifier causes two events to be triggered: One when the key is pressed, and another when the key is released. This is good but not enough. What's missing is some indication that allows us to distinguish these two events.

Please add a properties (e.g. 'KEYUP' and 'KEYDOWN') to the event that pass on this information.

[gterras]

Hi any news on this issue ? I also think it would be really useful, using push with prevent can lose some events and lead to an inverted push behavior.

[MShoaei]

I guess all we have to do is to add the keyPressed variable which already exists and is used to the event sent back to user.

somewhere inside this function: https://github.com/iFgR/vue-shortkey/blob/55d802ea305cadcc2ea970b55a3b8b86c7b44c05/src/index.js#L114-L123

My thinking is that the function above should become:

const dispatchShortkeyEvent = (pKey) => {
  const e = new CustomEvent('shortkey', { bubbles: false })
  if (mapFunctions[pKey].key) e.srcKey = mapFunctions[pKey].key

  e.keyDown = keyPressed // this is the key status

  const elm = mapFunctions[pKey].el
  if (!mapFunctions[pKey].propagte) {
    elm[elm.length - 1].dispatchEvent(e)
  } else {
    elm.forEach(elmItem => elmItem.dispatchEvent(e))
  }
}

[ksolberg]

Would be very helpful to track this. Currently having a problem when I have two shortkeys configured:

<div v-shortkey.push="['alt']" @shortkey="onAlt">
   ....
  <button v-shortkey.push="['alt', 'n']" @shortkey="onAdd">add</button>
  ...
</div>

Outer is used to show visual hints on letters to push. Inner executes an action,

When I Alt-tab away from browser window and then back things gets inverted sometimes. If i could track up vs down I could ensure toggle only executes on down.

[fgr-araujo]

A solution maybe debounce time to recognize the key. I'll study it.