Hi All,

I have an application which uses QML Treeview. The items of the treeview needs to be editable, hence I have configured a delegate which toggles between text and textedit when user sets a flag.

Here's the code
Qt Code: 
  1. ApplicationWindow {
  2.     id:window
  3.     visible: true
  4.     width: 640
  5.     height: 480
  6.     title: qsTr("File System")
  7.  
  8.     property var clickedIndex: -1
  9.  
  10.     ListModel{
  11.         id:listModel
  12.         ListElement{
  13.             colorName:"red"
  14.         }
  15.         ListElement{
  16.             colorName:"yellow"
  17.         }
  18.         ListElement{
  19.             colorName:"pink"
  20.         }
  21.     }
  22.  
  23.     ListView{
  24.         id:listview
  25.         height: parent.height
  26.         width: 50
  27.         model: listModel
  28.         anchors.left: parent.left
  29.  
  30.         delegate: Component{
  31.             Rectangle{
  32.                 color:  colorName
  33.                 height: 50
  34.                 width: 50
  35.                 MouseArea{
  36.                     anchors.fill: parent
  37.                     onClicked: {
  38.                         console.log("Clicked " + colorName)
  39.                         forceActiveFocus()
  40.                     }
  41.                 }
  42.             }
  43.         }
  44.     }
  45.  
  46.     TreeView {
  47.         id: view
  48.         objectName: "view"
  49.         anchors.margins: 2 * 12
  50.         anchors.left:listview.right
  51.         anchors.top:listview.top
  52.         anchors.right:parent.right
  53.         anchors.bottom:parent.bottom
  54.  
  55.         model: treemodel
  56.         selectionMode:SelectionMode.ExtendedSelection
  57.         headerVisible: true
  58.  
  59.         TableViewColumn {
  60.             title: "Name"
  61.             role: "Title"
  62.             width: 300
  63.             delegate: Component{
  64.                 Item {
  65.                     Text {
  66.                         id: test
  67.                         text: model.Title
  68.                         color: model.IsSelected ? "green" : "blue"
  69.                         width: parent.width
  70.                         visible: !model.EditEnabled
  71.                     }
  72.                     TextEdit{
  73.                         id: textField
  74.                         width: parent.width
  75.                         visible: model.EditEnabled
  76.  
  77.                         onVisibleChanged: {
  78.                             if(visible)
  79.                             {
  80.                                 textField.text = model.Title
  81.                                 forceActiveFocus()
  82.                             }
  83.  
  84.                             onActiveFocusChanged: {
  85.                                 if(!activeFocus)
  86.                                 {
  87.                                     model.EditEnabled = activeFocus
  88.                                 }
  89.                             }
  90.  
  91.                             onTextChanged: {
  92.                                 model.Title = textField.text
  93.                             }
  94.                         }
  95.                     }
  96.                 }
  97.             }
  98.         }
  99.  
  100.         TableViewColumn {
  101.             title: rect
  102.             role:"IsSelected"
  103.             width: 25
  104.  
  105.             delegate: Component{
  106.                 Rectangle{
  107.                     id: rect
  108.                     anchors.right: test.right
  109.                     color: model.IsSelected ? "red" : "teal"
  110.                     MouseArea{
  111.                         anchors.fill: parent
  112.                         onClicked: {
  113.                             model.EditEnabled = true;
  114.                         }
  115.                     }
  116.                 }
  117.             }
  118.         }
  119.     }
  120. }
To copy to clipboard, switch view to plain text mode 

However, I want the textEdit to loose focus when i click any other item displayed in the screen.

Please provide me some pointers