[Interest] StackView and focus question

[Elvis Stansvik]

Hi,

In trying to debug some focus issues when using a StackView (Qt Quick
2), I came across something I find strange, and I'm hoping someone can
explain it to me.

Take a look at the following test case (main.qml, Red.qml, Green.qml,
Blue.qml and FocusIndicator.qml):


main.qml:

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    width: 640
    height: 480
    visible: true

    property Item red: Red {}
    property Item green: Green {}
    property Item blue: Blue {}

    StackView {
        id: stackView
        initialItem: red
        anchors.fill: parent
        focus: true

        onCurrentItemChanged: {
            if (currentItem) {
                // Request focus for the current item.
                currentItem.focus = true
                console.log("focus: " + focus + ", activeFocus: " + activeFocus)
            }
        }

        Timer {
            // Loop through red -> green -> blue items.
            interval: 2000
            running: true
            repeat: true

            onTriggered: {
                if (stackView.currentItem === red) {
                    console.log("switching to green")
                    stackView.push({item: green, replace: true})
                } else if (stackView.currentItem === green) {
                    console.log("switching to blue")
                    stackView.push({item: blue, replace: true})
                } else {
                    console.log("switching to red")
                    stackView.push({item: red, replace: true})
                }
            }
        }
    }
}


Red.qml:

import QtQuick 2.4

FocusScope {
    focus: true

    Rectangle {
        width: parent.width/2
        height: parent.height/2
        color: "red"
        focus: true

        FocusIndicator {}
    }

    FocusIndicator {}
}


Green.qml:

import QtQuick 2.4

FocusScope {
    focus: true

    Rectangle {
        width: parent.width/2
        height: parent.height/2
        color: "green"
        focus: true

        FocusIndicator {}
    }

    FocusIndicator {}
}


Blue.qml:

import QtQuick 2.4

FocusScope {
    focus: true

    Rectangle {
        width: parent.width/2
        height: parent.height/2
        color: "blue"
        focus: true

        FocusIndicator {}
    }

    FocusIndicator {}
}


FocusIndicator.qml:

import QtQuick 2.4

// Decorative item to indicate focus / active focus.

Row {
    id: indicator
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.rightMargin: 2
    anchors.topMargin: 2

    // Left rectangle indicates focus.
    Rectangle {
        width: 10
        height: 10
        color: indicator.parent.focus ? "green" : "red"
    }

    // Right rectangle indicates active focus.
    Rectangle {
        width: 10
        height: 10
        color: indicator.parent.activeFocus ? "green" : "red"
    }
}


The main code cycles through showing an instance of the Red, Green and
Blue component as the only item in a StackView. When the current item
changes (onCurrentItemChanged), it requests focus for the new current
item.

Red, Green and Blue consists of a FocusScope with a nested rectangle.
Both the FocusScope and the nested rectangle requests focus initially
(focus: true), and both are decorated with a FocusIndicator, which is
an item that indicates focus and activeFocus for its parent.

What surprises me is that, despite the printout:

qml: focus: true, activeFocus: false
qml: switching to green
qml: focus: true, activeFocus: true
qml: switching to blue
qml: focus: true, activeFocus: true
qml: switching to red
qml: focus: true, activeFocus: true
qml: switching to green
...
...

which is what I would expect, so far so good. But (!): The visual
result is that when switching to green and blue for the first time
(lines 2-3 and 4-5 in the printout), the focus indicator shows red and
green for the current FocusScope, which would correspond to "focus:
false, activeFocus: true" (not seen anywhere above, and something I
thought an impossible combination.. doesn't activeFocus imply focus?).
Note that it shows green green (focus: true, activeFocus: true) for
the nested rectangle at that point, it's just the surrounding
FocusScope which has this weird state.

So what's going on? Is it just my FocusIndicator gadged that is broken
somehow? I think it's pretty simple..

Very thankful for any clarifications! I'm attaching the files for
easier local testing.

Elvis

Blue.qml
Description: Binary data

FocusIndicator.qml
Description: Binary data

Green.qml
Description: Binary data

main.qml
Description: Binary data

Red.qml
Description: Binary data

_______________________________________________
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest