How to achieve click an area outside the TextField to make the TextField lose focus?

Question

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    TextField {
        id:textField
        width: 130
        height: 50
    }

    Button {
        anchors.right: parent.right
        text: "lose Focus"
    }
}

why textField don't lose Focus when Button Click? How to achieve click an area outside the TextField to make the TextField lose focus?

Answer 1

The simplest way using your existing code is to force active focus on another item when the button is clicked:

Button {
    anchors.right: parent.right
    text: "lose Focus"
    onClicked: forceActiveFocus()
}

To make the TextField lose focus when clicking the area outside of it, you can do something similar with MouseArea:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MouseArea {
        anchors.fill: parent
        onClicked: forceActiveFocus()
    }

    TextField {
        id: textField
        width: 130
        height: 50
    }
}

This item needs to be below (i.e have a lower Z value than) other items in the scene. You can also make it a parent of the other items to achieve this:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MouseArea {
        anchors.fill: parent
        onClicked: forceActiveFocus()

        TextField {
            id: textField
            width: 130
            height: 50
        }
    }
}

If you're using Qt Quick Controls 2, you can use the focusPolicy property on e.g. Pane:

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Pane {
        anchors.fill: parent
        focusPolicy: Qt.ClickFocus
    }

    TextField {
        id: textField
        width: 130
        height: 50
    }
}