{"id":211,"date":"2023-07-14T07:58:36","date_gmt":"2023-07-14T07:58:36","guid":{"rendered":"https:\/\/www.vcreatelogic.com\/?p=211"},"modified":"2023-07-14T08:23:28","modified_gmt":"2023-07-14T08:23:28","slug":"what-exactly-does-focusscope-do-in-qml","status":"publish","type":"post","link":"https:\/\/www.vcreatelogic.com\/index.php\/2023\/07\/14\/what-exactly-does-focusscope-do-in-qml\/","title":{"rendered":"What exactly does FocusScope do in QML?"},"content":{"rendered":"\n

If you look at the documentation of FocusScope<\/a>, you will see this:<\/p>\n\n\n\n

\n

Focus scopes assist in keyboard focus handling when building reusable QML components.<\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

God I wish I could understand the entirety of FocusScope<\/strong> by reading this line of text. To be fair, the documentation has links to a rather elaborate article<\/a> which explains how keyboard focus works in QML, and somewhere in that article FocusScope<\/strong> is also covered. However, honestly speaking that article will likely leave you more confused about FocusScope<\/strong>.<\/p>\n\n\n\n

In this blog, I want to demystify keyboard focus<\/strong> and FocusScope<\/strong>, so that you can use it with utmost confidence and you know exactly what you are getting into. <\/p>\n\n\n\n

Understanding Keyboard Focus<\/h2>\n\n\n\n

First, let’s understand keyboard focus itself. QML’s Item<\/strong> has a focus<\/strong> property, which can be set by the developer to true<\/strong>, and by default it’s false<\/strong>. When we set an Item<\/strong>‘s focus<\/strong> property to true, that item receives keyboard focus.<\/p>\n\n\n\n

Here is a small piece of QML code in which we define a TextBox<\/strong> component for accepting a single line of text. We then create a form using several instances of this component.<\/p>\n\n\n\n

import QtQuick\nimport QtQuick.Window\n\nWindow {\n    width: 320\n    height: 240\n    visible: true\n    title: qsTr(\"Understanding Keyboard Focus\")\n    color: \"lightsteelblue\"\n\n    Grid {\n        columns: 2\n        spacing: 10\n        anchors.centerIn: parent\n\n        Text { text: \"Name: \" }\n        TextBox { }\n\n        Text { text: \"Place: \" }\n        TextBox { }\n\n        Text { text: \"Animal: \" }\n        TextBox { }\n\n        Text { text: \"Thing: \" }\n        TextBox { }\n    }\n\n    component TextBox : Rectangle {\n        width: 200\n        height: textInput.implicitHeight + 8\n        border {\n            width: textInput.focus ? 2 : 1\n            color: textInput.focus ? \"black\" : \"gray\"\n        }\n\n        TextInput {\n            id: textInput\n            width: parent.width - 8\n            anchors.centerIn: parent\n        }\n    }\n}<\/code><\/pre>\n\n\n\n
When we execute the above QML code, we see a window like this.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
None of the TextBox<\/strong> instances already have keyboard focus, as evidenced by the fact that we don’t see a blinking cursor anywhere.<\/p>\n\n\n\n
Let’s try to assign keyboard focus to the first TextBox<\/strong>, by setting it’s focus<\/strong> property to true<\/strong>.<\/p>\n\n\n\n
Grid {\n    columns: 2\n    spacing: 10\n    anchors.centerIn: parent\n\n    Text { text: \"Name: \" }\n    TextBox {\n        focus: true<\/strong>\n    }\n\n    Text { text: \"Place: \" }\n    TextBox { }\n\n    Text { text: \"Animal: \" }\n    TextBox { }\n\n    Text { text: \"Thing: \" }\n    TextBox { }\n}<\/code><\/pre>\n\n\n\n
When we execute this piece of code, this is what we get.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
!!! NO DIFFERENCE !!!<\/strong><\/p>\n\n\n\n
We don’t see a blinking cursor still. Why? <\/p>\n\n\n\n
Because assigning focus<\/strong> to the TextBox<\/strong> item, caused its root Rectangle<\/strong> to receive focus and not the TextInput<\/strong> inside it. So, how do we get the TextInput<\/strong> inside it to get focus?<\/p>\n\n\n\n
? What if we alias<\/em>ed TextBox<\/strong>‘s focus<\/strong> property to its TextInput<\/strong>‘s focus<\/strong> property? ?<\/p>\n\n\n\n
component TextBox : Rectangle {\n    property alias focus: textInput.focus<\/strong>\n\n    width: 200\n    height: textInput.implicitHeight + 8\n    border {\n        width: textInput.focus ? 2 : 1\n        color: textInput.focus ? \"black\" : \"gray\"\n    }\n\n    TextInput {\n        id: textInput\n        width: parent.width - 8\n        anchors.centerIn: parent\n    }\n}<\/code><\/pre>\n\n\n\n
Well, this will cause a run-time error: ?<\/p>\n\n\n\n
KeyboardFocus.qml:32:9: Cannot override FINAL property<\/code><\/pre>\n\n\n\n
Alright, let’s try and do this then. ? Whenever the Rectangle<\/strong> gets focus<\/strong>, let’s have TextInput<\/strong>‘s focus copy it. ?<\/p>\n\n\n\n
component TextBox : Rectangle {\n    width: 200\n    height: textInput.implicitHeight + 8\n    border {\n        width: textInput.focus ? 2 : 1\n        color: textInput.focus ? \"black\" : \"gray\"\n    }\n\n    TextInput {\n        id: textInput\n        width: parent.width - 8\n        anchors.centerIn: parent\n        focus: parent.focus\n    }\n}<\/code><\/pre>\n\n\n\n
When we execute the program, we will see that the first TextBox did get focus …<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
… but we see a warning on the console! ?<\/p>\n\n\n\n
KeyboardFocus.qml:39:9: QML TextInput: Binding loop detected for property \"focus\"<\/code><\/pre>\n\n\n\n
Why? ?<\/p>\n\n\n\n