4

I have a dijit tree and I want to be able to select or highlight the text in the tree nodes so that they can be copied/pasted. Dojo has some examples of trees here. all of which demonstrate my problem.

Additionally, here is a JSFiddle with a dijit/tree to demonstrate the issue.

If you load any of the examples, you'll notice you can't drag the mouse to highlight the tree text.

I've tried changing the HTML that I pass to Dojo but it looks like whatever it puts in the node cannot be selected, I'm not sure what to do. It seems like Dojo has it's own CSS that is causing this. The styling seems obfuscated so I'm not sure where to look to make changes.

Is there a specific CSS file that I have to override? Or is there anything else I can do to edit tree nodes myself?

Eric Alberson
  • 1,116
  • 1
  • 11
  • 23
  • I have a partial answer, from getting in chrome devtools and inspecting some of the unselectable text, particularly its Event Listeners. It says there's a selectstart listener on div#tree.dojoDndContainerOver.dijitTree.dijitTreeHover.dijitHover, that was installed at _dndContainer.js inside dijit: https://github.com/dojo/dijit/blob/7fcbe24258dfd117fae87d92aa75a2a2baf00a88/tree/_dndContainer.js#L73 Comment "// cancel text selection and text dragging". If I Remove it in devtools, the text becomes selectable. Don't know how to prevent this handler or uninstall it from the program, though. – Don Hatch Feb 22 '17 at 08:24
  • Ok, here is a workaround that actually works for me: `tree.dndController.events.splice(4,1)[0].remove();` . In other words, remove the event listener at index 4 from the events array (you can see it was inserted at that index, from the aforementioned source code on github), and call remove() on it. That makes the text selectable. Now hopefully an expert will jump in and tell us the *right* way to do this. – Don Hatch Feb 22 '17 at 09:44
  • @DonHatch Thanks for your response, and sorry about the late reply. I tried your code in the JSFiddle that I linked. It didn't work for me. Did you have a working example somewhere online? – Eric Alberson Dec 02 '17 at 21:50

1 Answers1

0

I can't get your fiddle to work to try and provide a suggestion but the CSS you are looking for is 'user-select' https://developer.mozilla.org/en-US/docs/Web/CSS/user-select you should apply it to the treeNodes's css classes

Andrew Daniel
  • 688
  • 1
  • 5
  • 7