You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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, becauseuseHotkeys
binds the event to the**document**
by default. When I open theDrawer
with a shortcut key, I activate the code that prevents thekeydown
event from bubbling, causing the keydown event to be blocked and unable to bubble to thedocument
, which causes the shortcut bound withuseHotkeys
to 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.host
via the document parameter to bind the hotkey inside my extension. But as soon as I set thedocument
parameter, the code gets an error. I don't know how to fix this, from the document it seems thatdocument
can only set the document of the iframe?To Reproduce
Steps to reproduce the behavior:
meta+u
to open the Drawermeta+u
again to try to close the Drawer.meta+u
doesn't work.meta+u
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 crashesThe text was updated successfully, but these errors were encountered: