fix: handle focus and keyboard navigation when components are used in shadow DOM#3674
Open
cpsoinos wants to merge 19 commits intoradix-ui:mainfrom
Open
fix: handle focus and keyboard navigation when components are used in shadow DOM#3674cpsoinos wants to merge 19 commits intoradix-ui:mainfrom
cpsoinos wants to merge 19 commits intoradix-ui:mainfrom
Conversation
… shadow DOM boundary
…ross the shadow DOM boundary
…ss the shadow DOM boundary
…the shadow DOM boundary
|
cpsoinos
force-pushed
the
JA-13509-shadow-dom-focus
branch
from
ca85a26 to
897233e
Compare
- Add data-radix-menu-sub-trigger attribute to MenuSubTrigger for proper identification - Implement custom event system for explicit submenu closure in shadow DOM contexts - Disable automatic grace timer closure in shadow DOM to prevent premature submenu closing - Use native event coordinates for improved accuracy in shadow DOM environments - Extend grace period to 800ms in shadow DOM to account for coordinate detection limitations - Ensure only one submenu remains open when navigating between multiple subtriggers 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove unnecessary empty lines and unused variables - Extract shadow DOM detection into reusable utility function - Simplify coordinate handling by removing unused adjustments - Revert isPointerInGraceArea changes that weren't needed for the fix - Reduce code duplication in shadow DOM detection logic 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
cpsoinos
force-pushed
the
JA-13509-shadow-dom-focus
branch
from
970ef4c to
b9126cc
Compare
… DOM The logic was unnecessary, and infact, was incorrect, as it was running when _not_ in a shadow DOM
|
It'd be great to see this fix merged. Radix UI team, what are the blockers? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces comprehensive improvements to focus management across several Radix UI packages, with a particular emphasis on supporting Shadow DOM scenarios. The main enhancement is the addition and integration of the
getDeepActiveElementutility, which reliably retrieves the currently focused element even when focus is within a shadow root. This change ensures consistent and predictable focus behavior for components rendered inside Shadow DOM, and also introduces new logic for menu and submenu interactions in these contexts.Focus Management Enhancements:
getDeepActiveElementutility to@radix-ui/primitive, enabling accurate retrieval of the focused element across Shadow DOM boundaries.document.activeElementwithgetDeepActiveElementin@radix-ui/react-focus-scope,@radix-ui/react-menu,@radix-ui/react-navigation-menu, and@radix-ui/react-one-time-password-field, ensuring robust focus detection and handling in Shadow DOM environments. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13]Menu and Submenu Shadow DOM Support:
@radix-ui/react-menuto force-close other submenus when entering any menu item within Shadow DOM, using a custom bubbling event (radix-force-close-submenu). This prevents unintended multiple submenus from remaining open. [1] [2]MenuSubTriggerto listen for the custom close event and conditionally close submenus, excluding the currently hovered trigger.Utilities and Dependency Updates:
@radix-ui/primitiveas a dependency to@radix-ui/react-focus-scopeto support the new utility function.isInShadowDOMutility to detect if an element is inside a Shadow DOM, used to trigger adjusted menu behaviors.These changes collectively improve focus management reliability and menu interaction consistency, especially for applications leveraging Shadow DOM for encapsulation.
Fixes #3287
Fixes #3353
Fixes #2606