QML: Accept TextField onClicked outside - qt

Question

Imagine the following:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
TextField {
anchors.centerIn: parent
onEditingFinished: console.log("input is: " + text)
}
}
How do I achive that the input of the TextField is accepted (onEditingFinished emitted), on clicking anywhere outside of the TextField (not pressing enter, tab,.. just a mouse click)?
I might set a MouseArea around it with onClicked: forceActiveFocus() to force onEditingFinished, but how do I achive this within a large application with many layers/views? This does not seem to be the right solution.

Answer 1

You can take this approach:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
id: root
width: 640
height: 480
visible: true
title: qsTr("Hello World")
MouseArea {
anchors.fill: parent
onClicked: {
if (root.activeFocusItem != null) {
root.activeFocusItem.focus = false;
}
}
}
TextField {
anchors.centerIn: parent
onEditingFinished: console.log("input is: " + text)
}
}
This places a single MouseArea filling your Window as a backstop to anything that might appear above it. Either a mouse click will be accepted by a control sitting above the mouse area or will pass through to it and clear focus on anything that might have it.