QML TextInput never loses focus

Hello everyone. I'm writing my own qml object for textinput. What I'have done so far is:

Code:

---

//Input.qml file
import QtQuick 2.8
import QtGraphicalEffects 1.0
Item {
    id:root
 
    property color shadowColor:"#b7b7b7"
    property color backgroundColor:"#eaeaea"
    property int shadowRadius:4
    property alias text:yazı.text
    property bool shadowless:false
    property alias radius:arkaplan.radius
    property bool icon : simge.source
 
    Rectangle{
        id:arkaplan
        anchors.fill: parent
        radius:2
        color:backgroundColor
        border.color: backgroundColor
        layer.enabled: true
        layer.effect: DropShadow{
            radius: if(!shadowless) radius=shadowRadius; else radius=0;
            samples: 9
            transparentBorder: true
            color: shadowColor
            verticalOffset: 0
            horizontalOffset: 0
        }
    }
 
    TextInput{
        anchors.fill: parent
        id:text
        verticalAlignment: Qt.AlignVCenter
        padding: 8
        font.bold: true
        onFocusChanged: console.log("focus changed to: "+focus)
 
    }
 
}

---

but, when I once focus the TextInput, no matter what I do (clicking outside the element, hitting esc key) I can't lose the focus. If I put two TextInput, then I can lose one's focus by clicking the other.
I have just found a weird way to lose the focus:

Code:

---

import QtQuick 2.8
import QtQuick.Window 2.2
import "qrc:/UI"
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    FocusScope{
        id:fakeFocus
    }
 
    MouseArea{
        anchors.fill: parent
        onPressed: fakeFocus.forceActiveFocus()
 
    }
        Input{
            width:128
            height: 32
            x:64
            y:23
            radius: 0
        }
        Input{
            width:128
            height: 32
            x:64
            y:64
            radius: 0
        }
 
}

---

this way, I can lose the focus by clicking outside. But it seemed so dirty way of doing this. Is there any other method?
Thanks,

I also wanted to achieve the same thing and had to do pretty much the same thing.
I added this mouse-area as the bottom-most item in the Window.

Code:

---

Window {
    id: rootWindow
 
    // set window's proerties, etc.
 
    MouseArea {
        anchors.fill: parent
 
        onClicked: {
            console.log("base mouse area pressed")
            focus = true
        }
    }
 
    // everything else goes here onward
}

---

This does pretty much the same thing, just that we don't have to create an extra FocusScope this way.