[Interest] Keyboard navigation issues in Quick2

[Ola Røer Thorsen]

Hi all,

here is a case that I find rather limiting and time-consuming. It has to do
with focus scopes and keyboard navigation. I'm looking for a best way to
deal with the following situation:

- I have a ColumnLayout of button-like items, like a popup-menu.
- The first item has "focus" set to true.
- KeyNavigation.down is used to walk between these to move focus.
- The Items' "enabled"-value can be set to false if this item is
unavailable for some reason. In this case "KeyNavigation" works fine and
jumps past the element and on to the next (good).

However if you try to activate focus on the first item (using KeyNavigation
from some other item), and it is disabled, you get no focus at all, and
keyboard navigation is stuck.

I would expect that focus would move on to the next item in the focus
scope, if the item with active focus was disabled.

Also if you disable the item that has focus, focus does not move to the
next item. So you're stuck again.

Why would I disable one of the items? Well if this is a menu, it could be
that one of the menu actions are unavailable for some reason.

Isn't this a bug? It can be worked around with ugly javascript code, but
the fixes are not scalable and you will need calling "forceActiveFocus" on
items instead.

"KeyNavigation" seems to be way to create a focus order chain similar to
what you could do with widgets. Or am I wrong?

Below is an example snippet that demonstrate these two issues (tested with
Qt5.2RC1). It has two columns that you can jump between using the cursor
keys. Press the spacebar to disable the upper left box, and see what
happens if focus is on the right, or focus is on left box 1.

Best regards,
Ola


import QtQuick 2.1
import QtQuick.Layouts 1.0

Rectangle {
    width: 800
    height: 480

    Keys.onSpacePressed: {
        box1.enabled = !box1.enabled;
    }

    Text {
        anchors.centerIn: parent
        text: "Use cursor keys to move focus around.\nPush spacebar to
toggle box1 enabled.\n\nNote that it is not possible to go from the right
boxes to\nthe left if box1 is disabled (gray).\nYou'd expect that box2
would get focus if box1 is disabled.\nIt is also possible to get stuck if
box1 is disabled while it has active focus.\n"
    }

    ColumnLayout {
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: 200

        Rectangle {
            focus: true
            id: box1
            color: enabled ? (activeFocus ? "green" : "orange") : "gray"
            width: 180
            height: 30
            Text {
                anchors.fill: parent
                text: "box1"
            }
            KeyNavigation.down: box2
            KeyNavigation.right: rbox1
        }

        Rectangle {
            focus: true
            id: box2
            color: enabled ? (activeFocus ? "green" : "orange") : "gray"
            width: 180
            height: 30
            Text {
                anchors.fill: parent
                text: "box2"
            }
            KeyNavigation.down: box3
            KeyNavigation.right: rbox1
        }

        Rectangle {
            focus: true
            id: box3
            color: enabled ? (activeFocus ? "green" : "orange") : "gray"
            width: 180
            height: 30
            Text {
                anchors.fill: parent
                text: "box3"
            }
            KeyNavigation.down: box4
            KeyNavigation.right: rbox1
        }

        Rectangle {
            focus: true
            id: box4
            color: enabled ? (activeFocus ? "green" : "orange") : "gray"
            width: 180
            height: 30
            Text {
                anchors.fill: parent
                text: "box4"
            }
            KeyNavigation.down: box1
            KeyNavigation.right: rbox1
        }
    }
    ColumnLayout {
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: 200

        Rectangle {
            focus: true
            id: rbox1
            color: enabled ? (activeFocus ? "green" : "orange") : "gray"
            width: 180
            height: 30
            Text {
                anchors.fill: parent
                text: "rightbox1"
            }
            KeyNavigation.down: rbox2
            KeyNavigation.left: box1
        }
        Rectangle {
            focus: true
            id: rbox2
            color: enabled ? (activeFocus ? "green" : "orange") : "gray"
            width: 180
            height: 30
            Text {
                anchors.fill: parent
                text: "rightbox2"
            }
            KeyNavigation.down: rbox1
            KeyNavigation.left: box1
        }
    }

}
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20131122/4dd97e06/attachment.html>