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:
- Press
meta+u to open the Drawer
- Then press
meta+u again to try to close the Drawer.
- And you'll see that
meta+u doesn't work.
- At this point, if you click on the outer area of the Drawer and then press
meta+u again.
- 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
Describe the bug
I'm working on a Chrome extension that uses Shadow DOM technology. Internally, my shadow dom uses the
useHotkeyshooks 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
keydownevent 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,
useHotkeyscannot be triggered normally, becauseuseHotkeysbinds the event to the**document**by default. When I open theDrawerwith a shortcut key, I activate the code that prevents thekeydownevent from bubbling, causing the keydown event to be blocked and unable to bubble to thedocument, which causes the shortcut bound withuseHotkeysto be invalid. Specifically, I can open the drawer with the hotkey bound touseHotkeys, but I can't use the hotkey to close the drawer.I've tried setting
shadowRoot.hostvia the document parameter to bind the hotkey inside my extension. But as soon as I set thedocumentparameter, the code gets an error. I don't know how to fix this, from the document it seems thatdocumentcan only set the document of the iframe?To Reproduce
Steps to reproduce the behavior:
meta+uto open the Drawermeta+uagain to try to close the Drawer.meta+udoesn't work.meta+uagain.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
documentparameter, the program gets the following error and crashes