angular2-hotkeys Scoped hotkeys

Currently, creating a hotkey binds the event to the body, giving is an essentially global context. It would be nice to be able to bind events to a particular field or component, such that if multiple components used the same hotkey the local callback would resolve based on which of those components has focus.

Oct 26 '17 20:10 DAquilina

Adding the hotkeys to particular components seems to be no problem. You just need to clean-up afterwards.

ngOnDestroy() {                                                                                  
  for (const combo of ['j', 'k']) {                                                           
    const hk = this._hotkeysService.get(combo)                                               
    this._hotkeysService.remove(hk);                                                         
  }      
}

However, in this case the components were branched, such that only one of them is active at a time. It does not really depend on the focus. Still, returning false in the callback should prevent event-bubbling, shouldnt it?

Nov 08 '17 15:11 lgalke

The event is in no way bound to the actual component, though. Disposing of them isn't the issue, but rather consuming them in an isolated way. Returning false in the handler doesn't help to target the component that generated the keypress.

Example: I'm developer a custom datetime picker and have two of them side-by-side on a page. When the input is focused, I want the user to be able to open the picker by pressing "down", but if the first is focused and you press the assigned hotkey, the last one consumes the event. I believe that they override/hijack the hotkey in the global context when the component initialises.

Nov 08 '17 17:11 DAquilina

I see. Did you also try the directive variant it seems to override hotkeys temporarily. Still it might not be conditioned on which element is currently active. If not, we could work on a PR together. I just discovered this repository and found it useful for my current project. At some point I might also need the functionality that you are interested in.

Nov 08 '17 20:11 lgalke

The directive variant still uses mousetrap.bind, which binds to the global context, so that doesn't help. As for the PR, perhaps, though I don't have a lot of free time in the forseeable future. Regardless, I'm keeping an eye on this repo.

Nov 09 '17 13:11 DAquilina

@DAquilina I'm not seeing anything obvious in Mousetrap that would allow this, so it would definitely be a bit bigger undertaking to get this added. It would be pretty nice to have available though for sure.

How would you like to see this work, from your point of view? Do you want to supply a id/class that the focus target must have when event is fired to make it fire? Or an id/class that must exist somewhere in the focus target hierarchy? Or would the most flexible solution be one where you could get the focus target supplied in the callback and you can do whatever checks you want in there?

Mar 28 '18 22:03 wittlock

I think there could be some more parameter that could be optional. But that when informing it with an element input or even a class could cause the shortcut to only activate in that input or class.

Sep 06 '18 16:09 jsilveira2

Dear @lgalke How can I use the directive version?

I wanted to use like accesskey attribute (just for focus or click), is it possible?

I can help if directions are given to implement this.

I noted that the directive file in master is different from version 2.1.2. Are there plans for next version @wittlock ?

thanks in advance for your kind attention.

Sep 29 '18 15:09 antoniolucasnobar