Page.head.sections.selectedIndex binding of values is broken

[Gustavo Pichorim Boiko]

When trying to assign a binding value to head.sections.selectedIndex, this value is not updated when the bound value changes.
See the example program below:

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
    id: mainview
    objectName: "mainView"

    width: units.gu(100)
    height: units.gu(75)

    Page {
        id: mainPage
        title: "selectedIndex: " + head.sections.selectedIndex + " should be: " + mainPage.selectedIndex
        property int selectedIndex: -1
        head.sections.model: [ "first", "second", "third" ]
        head.sections.selectedIndex: mainPage.selectedIndex

        Rectangle {
            anchors.fill: parent
            color: "white"

            Label {
                anchors.centerIn: parent
                text: "Click me"
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: mainPage.selectedIndex = (mainPage.selectedIndex + 1) % 3
        }
    }
}

[Tim Peeters (tpeeters)]

This construction with a binding for head.sections.selectedIndex should be avoided, because when the user taps on the sections to change the current section, the new index of the section is updated and the binding is broken.

Perhaps your newly defined property int selectedIndex should be an alias instead?

[Tim Peeters (tpeeters)]

Right. I confirmed the bug. For some reason the selectedIndex of head.sections is not updated. The binding seems broken.

I did test with the new header that we have in staging: http://paste.ubuntu.com/13345460/ and that works fine.

[Tim Peeters (tpeeters)]

I do not see how to fix this in UITK, because the Page.head.sections constructions is a bit weird. You can set head.sections.selectedIndex to update the selectedIndex, but it is a proxy configuration object, and not the "Sections" object itself, so bindings don't work. Also, when the Sections's selectedIndex is updated and you are using a binding on head.sections.selectedIndex, that binding is broken.

A quick workaround in the qml program above is to add:
       onSelectedIndexChanged: head.sections.selectedIndex = selectedIndex
 to the Page.

That will (obviously) update the head.sections.selectedIndex when the Page.selectedIndex is updated. But still if the user interacts with the sections in the header, the two properties will be out-of sync. Still, I recommend you to do this if you need a quick fix.

We are currently landing UITK, and once the landing is done, we deprecate the Page.head property and we have a much better (and direct) way to configure the header of the Page. After that landing is done (you can already test by taking UITK staging), can change the code similar to what I have done in http://pastebin.ubuntu.com/13798019/ to get the real solution.

[Tim Peeters (tpeeters)]

Summary of my previous comment:

[21:09:31] <timp> boiko: I don't see a good fix for this issue right now, but we working on a UITK landing now that will fix things so you can make (small) changes to your app to make it all work well
[21:09:46] <timp> boiko: but I did propose a quick fix that you can use until we finish the UITK landing
[21:09:55] <boiko> timp: that's ok, thanks
[21:09:59] <timp> boiko: see my last comment on https://bugs.launchpad.net/ubuntu-rtm/+source/ubuntu-ui-toolkit/+bug/1517614 and let me know if you have questions about it
[21:10:00] <mup> Bug #1517614: Page.head.sections.selectedIndex binding of values is broken <Canonical System Image:Confirmed for bzoltan> <ubuntu-ui-toolkit (Ubuntu RTM):Triaged by tpeeters> <https://launchpad.net/bugs/1517614>
[21:10:45] <timp> boiko: the ultimate solution is this one http://pastebin.ubuntu.com/13798019/ but before you can use that we need to finish our current landing
[21:11:15] <boiko> timp: yep, ok

I changed the status to 'InProgress' for now, but when our landing is done we should change it to WontFix or FixReleased.

[Tim Peeters (tpeeters)]

UITK landed, so now the apps can use PageHeader with Sections where it works fine.