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

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.

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.

@Hawkeye64 yes, that works when you are using the Quasar CLI. But for TypeScript the Vue CLI works just better out of the box.

Well this entry has been added by the vue quasar plugin.

"dependencies": {
    "@quasar/extras": "^1.0.0",

I used to import material icons and roboto font this way:

import "@quasar/extras/roboto-font/roboto-font.css";
import "@quasar/extras/material-icons/material-icons.css";

Maybe that helps with the confusion.

Hello, it seems like you kiled the @quasar/extras package and moved its content into the main repository.

However, when I follow the instructions on how to use the new icon-sets I get the icon names instead of the icons in my application.
https://v1.quasar-framework.org/options/quasar-icon-sets#Introduction

This is how I have initialized the icons.

Vue.use(Quasar, {
  iconSet: require("quasar/icon-set/material-icons").default
});

Pretty simple, but I don’t know what else to do. No error messages.

I am using TypeScript + Vue-CLI v3