Unsolved ActiveFocus with TextEdit

[Valerian]

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