Tree is not compatible with contenteditable attribute

[Patrick Spiegel]

https://codepen.io/anon/pen/GavaXj?&editable=true&editors=101

Hello,

it seems like the tree is not fully compatible with the contenteditable attribute. Use-Case is renaming items in the tree.

[s.molinari]

Try it with

contenteditable="true"

However, that isn’t going to get you anything reactive or updated. You’d need to do more, like here: https://codepen.io/supraniti/pen/Lypobx

Scott

[Patrick Spiegel]

Hello,

Thanks for you example, however I wanted to keep my example simple. The heading of the tree items are not editable.
The general problem is, that items with contenteditable enabled just keep losing focus whenever you click onto them, when they are located inside a tree

By the way: contenteditable is just a shorthand for contenteditable="true" in vue.

[s.molinari]

Yes, and it does work in your codepen too (at least changing the text does). Should have tested it first instead of believing you.

So either I am misunderstanding what you are looking for or it is as I am thinking, you still need to “do” something with the “input”. A contenteditable span isn’t bound to any data on its own.

Scott

[Patrick Spiegel]

The body is not a problem. The problem are the blue headings. At least I have the problem on a current chrome version.

[s.molinari]

Ah. Ok. Yeah. Maybe because the click event is getting caught somehow, because the headers need to do selection and expansion actions.

So, I still don’t think contenteditable is the solution you need. You need to do something more like a swap in of an input, when clicked on and somehow avoid the click event for anything other than clicking the arrows to expand and collapse the branch/ tree. I could have sworn there was a prop to control just that too, but I’m not finding it.

Scott