fix: focus trap did not work for shadow root

JohannesKlauss / react-hotkeys-hook

React hook for using keyboard shortcuts in components.

https://react-hotkeys-hook.vercel.app/

MIT License

2.57k stars 113 forks source link

fix: focus trap did not work for shadow root #1108

Closed artchen-db closed 6 months ago

artchen-db commented 6 months ago

Problem

The intended element that receives the focus might be inside a shadow root. In such case the correct check for active element should be against the closest ShadowRoot.activeElement.

Example sandbox: https://codesandbox.io/p/sandbox/react-hotkeys-hook-shadow-root-focus-trap-cpp7kj

Solution

Instead of assuming document.activeElement, find the closest root node from ref.current first.

vercel[bot] commented 6 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-hotkeys-hook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 27, 2023 1:17am

JohannesKlauss commented 6 months ago

Thank you for your contribution!