Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] document property of options param in useHotkeys method not working #1183

Open
luichooy opened this issue Jun 3, 2024 · 0 comments
Open

Comments

@luichooy
Copy link

luichooy commented Jun 3, 2024

Describe the bug
I'm working on a Chrome extension that uses Shadow DOM technology. Internally, my shadow dom uses the useHotkeys hooks to bind a shortcut to quickly open/close the drawer component on the page.

Since there are many user-inputable components inside the drawer component, such as input, textarea. I need to prevent the keydown event from bubbling up when the user is typing inside my Shadow DOM to avoid triggering the hotkey of the page itself that triggers my chrome extension content, as some pages may have hotkeys set.

But this can lead to a problem. That is, useHotkeys cannot be triggered normally, because useHotkeys binds the event to the **document** by default. When I open the Drawer with a shortcut key, I activate the code that prevents the keydown event from bubbling, causing the keydown event to be blocked and unable to bubble to the document, which causes the shortcut bound with useHotkeys to be invalid. Specifically, I can open the drawer with the hotkey bound to useHotkeys, but I can't use the hotkey to close the drawer.

I've tried setting shadowRoot.host via the document parameter to bind the hotkey inside my extension. But as soon as I set the document parameter, the code gets an error. I don't know how to fix this, from the document it seems that document can only set the document of the iframe?

To Reproduce
Steps to reproduce the behavior:

  1. Press meta+u to open the Drawer
  2. Then press meta+u again to try to close the Drawer.
  3. And you'll see that meta+u doesn't work.
  4. At this point, if you click on the outer area of the Drawer and then press meta+u again.
  5. You will find that you can close the Drawer normally again

Please try and add a codesandbox or stackblitz to reproduce the bug:
<-- Link to reproducable -->

Expected behavior
I wish there was a way to bind the shortcut to the inside of my shadow DOM

Screenshots
When I set the document parameter, the program gets the following error and crashes

image

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant