search

JohannesKlauss / react-hotkeys-hook

React hook for using keyboard shortcuts in components.
https://react-hotkeys-hook.vercel.app/
MIT License
2.56k stars 111 forks source link

[BUG] hotKeys trigger from input inside WebComponent #1161

Open HJK181 opened 3 months ago

HJK181 commented 3 months ago

Describe the bug Hotkeys triggers if users has focus on an input inside a WebComponent. This is because events that happen in shadow DOM have the host element as the target, when caught outside of the component, see: https://javascript.info/shadow-dom-events

To Reproduce Steps to reproduce the behavior:

  1. Render a WebComponent input inside your React component, e.g. https://www.webcomponents.org/element/@polymer/paper-input
  2. Use the useHotkeys with some keys
  3. Focus the WebComponent input and press a key triggering the hotKey

Please try and add a codesandbox reproduce the bug:

just press c while focus is inside the input.

Expected behavior The hotkey is not triggered if the focus element is one of the elements the hook already takes care of when used inside a WebComponent. To solve this, isHotkeyEnabledOnTag should not just use _ref.target but also check if the _ref.composedPath()[0].tagName if the composed property of the event is true, indicating that the event is a composed event that can pass through shadow DOM boundaries, including events from within web components.

HJK181 commented 2 months ago

I gave it a try: https://github.com/JohannesKlauss/react-hotkeys-hook/pull/1164

JohannesKlauss commented 2 months ago

Thank you for your work, I'll have a look at it.