Unsolved ActiveFocus with TextEdit
-
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
ApplicationWindow { id:window visible: true width: 640 height: 480 title: qsTr("File System") property var clickedIndex: -1 ListModel{ id:listModel ListElement{ colorName:"red" } ListElement{ colorName:"yellow" } ListElement{ colorName:"pink" } } ListView{ id:listview height: parent.height width: 50 model: listModel anchors.left: parent.left delegate: Component{ Rectangle{ color: colorName height: 50 width: 50 MouseArea{ anchors.fill: parent onClicked: { console.log("Clicked " + colorName) forceActiveFocus() } } } } } TreeView { id: view objectName: "view" anchors.margins: 2 * 12 anchors.left:listview.right anchors.top:listview.top anchors.right:parent.right anchors.bottom:parent.bottom model: treemodel selectionMode:SelectionMode.ExtendedSelection headerVisible: true TableViewColumn { title: "Name" role: "Title" width: 300 delegate: Component{ Item { Text { id: test text: model.Title color: model.IsSelected ? "green" : "blue" width: parent.width visible: !model.EditEnabled } TextEdit{ id: textField width: parent.width visible: model.EditEnabled onVisibleChanged: { if(visible) { textField.text = model.Title forceActiveFocus() } onActiveFocusChanged: { if(!activeFocus) { model.EditEnabled = activeFocus } } onTextChanged: { model.Title = textField.text } } } } } } TableViewColumn { title: rect role:"IsSelected" width: 25 delegate: Component{ Rectangle{ id: rect anchors.right: test.right color: model.IsSelected ? "red" : "teal" MouseArea{ anchors.fill: parent onClicked: { model.EditEnabled = true; } } } } } } }
However, I want the textEdit to loose focus when i click any other item displayed in the screen.
Please provide me some pointers