Skip to content
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

Lab: TreeView inside Shadow Root crashes #36224

Closed
2 tasks done
NoFr1ends opened this issue Feb 16, 2023 · 2 comments · Fixed by #36225
Closed
2 tasks done

Lab: TreeView inside Shadow Root crashes #36224

NoFr1ends opened this issue Feb 16, 2023 · 2 comments · Fixed by #36225
Assignees
@siriwatknp
Labels
component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! package: lab Specific to @mui/lab

Comments

@NoFr1ends
Copy link
Contributor

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/s/throbbing-paper-pjlwnz?file=/src/App.tsx
(Theming is broken but thats not part of the issue)

Steps:

  1. Open the content of an TreeItem

Current behavior 😯

The application crashes because the TreeView can't be found.

Expected behavior 🤔

The TreeItem should be properly opened and the Children should be displayed.

Context 🔦

The issue only happens if the application is rendered inside a shadow root.

Your environment 🌎

npx @mui/envinfo 
  System:
    OS: macOS 13.2.1
  Binaries:
    Node: 16.17.1 - /usr/local/bin/node
    Yarn: Not Found
    npm: 8.15.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.3

The issue happens in Chrome and Safari.
@NoFr1ends NoFr1ends added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 16, 2023
NoFr1ends added a commit to NoFr1ends/material-ui that referenced this issue Feb 16, 2023
@NoFr1ends
Fix a crash when TreeItem is inside a Shadow Root
5929a22 
Fixes mui#36224
NoFr1ends added a commit to NoFr1ends/material-ui that referenced this issue Feb 16, 2023
@NoFr1ends
[lab] Fix TreeItem inside shadow root
63eb02d 
Checks if the Node.getRootNode() function is available and use it in handleFocus.

Fixes mui#36224
@NoFr1ends NoFr1ends mentioned this issue Feb 16, 2023
Merged
1 task
@zannager zannager added package: lab Specific to @mui/lab component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! labels Feb 16, 2023
NoFr1ends added a commit to NoFr1ends/material-ui that referenced this issue Feb 20, 2023
@NoFr1ends
[lab] Fix TreeItem inside shadow root
7b10b2c 
Checks if the Node.getRootNode() function is available and use it in handleFocus.

Fixes mui#36224
@ZeeshanTamboli
Copy link
Member

What is your use case for encapsulating the Tree View inside the shadow DOM?

@ZeeshanTamboli ZeeshanTamboli added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 21, 2023
@NoFr1ends
Copy link
Contributor Author

Embedding React applications inside other applications without having CSS conflicts etc.

@github-actions github-actions bot removed the status: waiting for author Issue with insufficient information label Feb 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@siriwatknp siriwatknp

Labels
component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! package: lab Specific to @mui/lab
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[TreeView] Fix Tree View inside shadow root crashes NoFr1ends/material-ui
4 participants
@NoFr1ends @siriwatknp @ZeeshanTamboli @zannager