Hotkey is being captured when user if focusing on input element
24hours opened this issue · 17 comments
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x ] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Current behavior
When using trying to enter some key value into element, the key value which coincide with hotkey will not appear and relavent function is triggered.
Expected behavior
Hotkey should not trigger when using typing text.
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
When using hotkeys in the environment where typing value is unavoidable, ie: enter search query.
Environment
Angular version: 9.1.0
Browser:
- Chrome (desktop) version 83
- 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: 12.8.1
- Platform: Linux
@flatstadt we need to support it. Like we did here.
@24hours just to be sure. You register a hotkey on a different element, and when you type in a text input, it's get triggered, right?
here
I'll look into it @NetanelBasal
@24hours just to be sure. You register a hotkey on a different element, and when you type in a text input, it's get triggered, right?
I registered the hotkey using hotkey service.
I replicated the issue @NetanelBasal. I created a div that contains an input. Associating a shortcut to the div, for example 'G', prevents typing 'g' in the input.
Do you know how to handle this?
Kind of. If you disable the preventDefault option, it works. But of course, by default an input element bubbles up all key events, and preventDefault, well, prevents typing in the letter that matches the shortcut. I'm not sure if it's a bug. What do you think @NetanelBasal ?
I could use srcElement, to exclude inputs and textareas and ignore preventDefault option even when enable as an option.
@24hours what's exactly your use case? In which key you're using? Please share the code.
@flatstadt we can check event.target, and if that's an input/textarea we'll not run the callback. But there are cases where you want to register hotkeys for inputs so we need to support it too.
@NetanelBasal So, we ignore the callback when the target is an input/textarea, but the event was registered on another element.
Yes, but event.target will be the input.
Yes, but event.target will be the input.
Yep. srcElement is deprecated @NetanelBasal
Implement the same functionality as here: https://github.com/chieffancypants/angular-hotkeys#api
The allowIn option.
@24hours what's exactly your use case? In which key you're using? Please share the code.
My application allow user to interact with the image using WASD key, at the same time, there is a search bar which allow user to search for specific image. Users are not able to search image with character w,a,s,d in it.
Since the hotkey is global, the event is binded to windows element. I guess this is why it got triggered in input element.
Fixed in the latest version.