Setting [hotkeys] on a button only activates hotkey if focused on the button

[gioragutt]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[X] Support request
[ ] Other... Please describe:

Current behavior

<button
	(click)="console.log('click')"
	hotkeys="meta.shift.5"
	(hotkey)="console.log('hotkey')"
>
	CLICK ME
</button>

I have a form with a bunch of buttons, much like the one above. Long as the form is open, I want the hotkey defined on each button to perform the action of the button. At first, I didn't have the (hotkey) handler, since I assumed it would invoke the (click) handler, but then I looked at the docs and added the (hotkey) handler, but it still didn't work.

The culprit is this piece of code setting the element option without being allowed to override it. I would want to set it as "document.documentElement", for example.

Expected behavior

When I set a hotkey on an element, I want to be able to have the hotkey work without having the element be focused.
Perhaps it can be an input flag of the directive, changing the ...hotkeys to happen after setting element to be the host element.

Minimal reproduction of the problem with instructions

See example in "Current Behavior"

What is the motivation / use case for changing the behavior?

I want to easily set hotkeys for buttons for the duration the button lives. Moreover, I want to not have to use HotkeysService directly to force the element to be document.

Environment

Angular version: 10.0.0
@ngneat/hotkeys version: 1.1.1



Browser:
- [X] Chrome (desktop) version 75.0.3770.100
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[NetanelBasal]

You're welcome to create a PR

[gioragutt]

You're welcome to create a PR

What's your preferred way to solve this from what I suggested?

[NetanelBasal]

Can you elaborate on the suggested solutions, please?

[gioragutt]

Can you elaborate on the suggested solutions, please?

It comes down to two ways:

1. Some declarative Input flat, such as <button hotkeys="meta.a" globalHotkey></button> or something similar
2. Replace this.hotkeysService.addShortcut({ ...hotkey, element: this.elementRef.nativeElement }) with this.hotkeysService.addShortcut({ element: this.elementRef.nativeElement, ...hotkey }) so that users will be able to override element. This is a breaking change as far as I can see.

[NetanelBasal]

I'm OK with adding both. The latter isn't a breaking change.

[gioragutt]

I'm OK with adding both. The latter isn't a breaking change.

When you say both, do you mean Both or Either? 😅

[NetanelBasal]

Both

[gioragutt]

NP. Thanks for the availability 👍🏻

[AdamSundberg]

Hi!

What is the progress on this one? I would really like this feature. Can I help in some way?