Skip to content

[tabs] Fix Arrow key navigation failing when component is rendered in shadow DOM #47178

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 8 commits into from
Nov 10, 2025
Merged

[tabs] Fix Arrow key navigation failing when component is rendered in shadow DOM #47178

merged 8 commits into from
Nov 10, 2025

Conversation

@sai6855
Copy link
Contributor

@sai6855 sai6855 commented Nov 4, 2025 •
edited
Loading

@mui-bot
Copy link

mui-bot commented Nov 4, 2025 •
edited
Loading

Netlify deploy preview

https://deploy-preview-47178--material-ui.netlify.app/

Bundle size report

Bundle Parsed size Gzip size
@mui/material 🔺+113B(+0.02%) 🔺+40B(+0.03%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 🔺+145B(+1.14%) 🔺+53B(+1.06%)

Details of bundle changes

Generated by 🚫 dangerJS against bbf154b

sai6855
sai6855 commented Nov 4, 2025
View reviewed changes
packages/mui-material/src/Tabs/Tabs.js

const list = tabListRef.current;
const currentFocus = ownerDocument(list).activeElement;
const currentFocus = getActiveElement(ownerDocument(list));
Copy link
Contributor Author

@sai6855 sai6855 Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed by adding a getActiveElement utility that recursively traverses shadow roots to find the actual focused
element. The issue was that document.activeElement returns the shadow host instead of the focused element inside
shadow DOM, causing keyboard navigation to fail the role="tab" check.

@sai6855 sai6855 requested a review from siriwatknp November 4, 2025 13:23
@sai6855 sai6855 changed the title [Tabs] Fix Arrow key navigation fails when component is rendered in shadow DOM [tabs] Fix Arrow key navigation fails when component is rendered in shadow DOM Nov 4, 2025
@sai6855 sai6855 added type: bug It doesn't behave as expected. package: material-ui Specific to Material UI. scope: tabs Changes related to the tabs. labels Nov 4, 2025
@sai6855 sai6855 changed the title [tabs] Fix Arrow key navigation fails when component is rendered in shadow DOM [tabs] Fix Arrow key navigation failing when component is rendered in shadow DOM Nov 5, 2025
@ZeeshanTamboli
Copy link
Member

ZeeshanTamboli commented Nov 7, 2025 •
edited
Loading

@sai6855 I would mark this as an "enhancement" instead of a "bug". What do you think? We don't claim to support all components inside Shadow DOM.

@sai6855 sai6855 added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. and removed type: bug It doesn't behave as expected. labels Nov 9, 2025
mj12albert
mj12albert reviewed Nov 10, 2025
View reviewed changes
packages/mui-utils/src/getActiveElement/getActiveElement.ts Outdated
* // Starting from a specific document
* const activeElement = getActiveElement(ownerDocument(element));
*/
export default function getActiveElement(root: Document | ShadowRoot = document): Element | null {
Copy link
Member

@mj12albert mj12albert Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could copy this slightly shorter one 😅
https://github.com/mui/base-ui/blob/master/packages/react/src/floating-ui-react/utils/element.ts#L5-L13

mj12albert
mj12albert approved these changes Nov 10, 2025
View reviewed changes
Copy link
Member

@mj12albert mj12albert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sai6855 There are a few more instances of raw activeElement, might as well correct it in this PR as well: https://github.com/search?q=repo%3Amui%2Fmaterial-ui+activeElement+path%3A%2F%5Epackages%5C%2Fmui-material%5C%2Fsrc%5C%2F%2F&type=code

@sai6855 sai6855 merged commit 15ff395 into mui:master Nov 10, 2025
18 checks passed
@sai6855
Copy link
Contributor Author

sai6855 commented Nov 10, 2025

@sai6855 There are a few more instances of raw activeElement, might as well correct it in this PR as well: https://github.com/search?q=repo%3Amui%2Fmaterial-ui+activeElement+path%3A%2F%5Epackages%5C%2Fmui-material%5C%2Fsrc%5C%2F%2F&type=code

Got it 👍 , I'll do it in separate PR as there are lot more instances to update, It will be easier to revert change if something goes wrong whilst keeping this PR changes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mj12albert mj12albert mj12albert approved these changes

@siriwatknp siriwatknp Awaiting requested review from siriwatknp

Assignees

No one assigned

Labels

package: material-ui Specific to Material UI. scope: tabs Changes related to the tabs. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Tabs] Arrow key navigation fails when component is rendered in shadow DOM

4 participants

@sai6855 @mui-bot @ZeeshanTamboli @mj12albert