[TreeView] Label text is not selectable

[cryzer12]

Summary

(Text label doesn't user select in v5)

Hi, I had a case in which it was necessary to copy the contents of the TreeItem, now this is not possible and it is blocked using JavaScript, I tried to change the behavior by disabling preventSelection to the onDownMouse event inside the custom ContentComponent in the TreeItem, but it did not help, is there a solution?

[oliviertassinari]

@cryzer12 The prevent text selection was made a default behavior in mui/material-ui#22846 by @joshwooding. You can disable it following this composition example: https://next.material-ui.com/components/tree-view/#contentcomponent-prop, removing the call to preventSelection().

[cryzer12]

@oliviertassinari,
I removed the call to preventSelection() in handle MouseDown using the example data on codesandbox. And still user-select doesn't work for the TreeItem, as if the preventDefault(event) on the onMouseDown was also set on the TreeItem
example

[oliviertassinari]

I could find the origin of the issue, it's the same one as mui/material-ui#24096:

https://github.com/mui-org/material-ui/blob/b2ee9521fe3b745b697ab1dd625320cdf675e0ab/packages/material-ui-lab/src/TreeItem/TreeItem.js#L226

The behavior has changed in mui/material-ui#21695. cc @joshwooding

[oliviertassinari]

@cryzer12 What's your use case for allowing text selection?

[joshwooding]

I could find the origin of the issue, it's the same one as mui/material-ui#24096:

https://github.com/mui-org/material-ui/blob/b2ee9521fe3b745b697ab1dd625320cdf675e0ab/packages/material-ui-lab/src/TreeItem/TreeItem.js#L226

The behavior has changed in mui/material-ui#21695. cc @joshwooding

Interesting, looks like we need to revisit that logic.

[cryzer12]

@oliviertassinari,
at the moment I just use css property user-select ;D

[oliviertassinari]

@cryzer12 What do you mean?

[alexgonch]

@oliviertassinari I have the exact same problem as the OP: we need to allow users to select text within the Tree List label. I cannot override the onFocus prop because it is "unsupported". The docs recommend using onNodeFocus, but it cannot stop the event propagation. Overriding methods exposed in useTreeItem doesn't help either.

Is there a workaround?

[andreterron]

I'm having the same issue.

@oliviertassinari, my scenario is that I'm building a JSON-like object viewer, and I'd like to be able to select the text from either the keys or values.

If I disable JavaScript using the Chrome Dev Tools, I can select the text.

Do you have any pointers or tips on where to start if I want to take a look at this?

[hvahan]

@oliviertassinari is there any update regarding this issue?

[fareed-cellino]

@oliviertassinari is there any update regarding this issue? We need to enable use select on Tree label.

[hermhe]

Hi @oliviertassinari , we also need the text selection. It seems that the reason is due to the focus management is changed in v5, the focus is always on the ul in the outermost and you manage the child focus by aria-activedescendant, so we can't select the text without any focus in li. My workaround is to temporarily change this part of the logic to the v4 version. But I don't think this is a good way to solve this issue, do you have any plan to fix it in v5?

[elilevit]

Also need this...any updates?

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @cryzer12?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.