State not "drawn" when being set

[xcoder]

Hello everyone,

I have one small problem. I wanted to make a sidebar, when you hover the mouse over a "button" a sidebar will slide out, and when the mouse exits the sidebar it will contract. It kinda works, but the problem is when, I exit the sidebar's mousearea to another mousearea the sidebar was overlapping, it doesn't "draw" contracted state, in console I'm able to see that the current state is correct and that onExited signal was fired.

It does work, if you exit to a non mousearea.

Illustration, might help, note the sidebar is the dark green:
!http://morf.lv/modules/zlTeam/images/qt_questions/exit_problem.png(Problem)!

Here is the sidebars code:

@
import QtQuick 2.0

Item {
id: root

state: "contracted"

width: 65

Item {
    id: content
    anchors {
        top: parent.top
        left:parent.left
        bottom: parent.bottom
    }

    width: 50

    Rectangle {
        id: background
        anchors.fill: parent

        color: "#099898"
    }

    MouseArea {
        id: contentMouseArea
        anchors.fill: parent
        hoverEnabled: true
        onExited: {
            root.state = "contracted"
            console.log("Exited " + root.state)
        }
    }
}

Item {
    id: openButton
    anchors.left: content.right
    anchors.verticalCenter: root.verticalCenter

    width: 15
    height: 40

    Rectangle {
        anchors.fill: parent;
        color: "#099898"
    }

    Image {
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        anchors.leftMargin: -15
        source: "./img/images/appbar.navigate.next.png"
        width: 40
        height: 40
    }

    MouseArea {
        id: openButtonMouseArea
        anchors.fill: parent

        hoverEnabled: true
        onEntered: root.state = "expanded"
    }


}

states: [
    State {
        name: "expanded"
        PropertyChanges { target: openButton; opacity:0 }
        PropertyChanges { target: content; width:50 }
    },
    State {
        name: "contracted"
        PropertyChanges { target: openButton; opacity:1 }
        PropertyChanges { target: content; width:0 }
    }

]

transitions: [
    Transition {
        from: "expanded"
        to: "contracted"
        NumberAnimation { target: openButton; property: "opacity"; duration: 200; easing.type: Easing.InOutQuad }
        NumberAnimation { target: content; property: "width"; duration: 200; easing.type: Easing.InOutQuad }
    },
    Transition {
        from: "contracted"
        to: "expanded"
        NumberAnimation { target: openButton; property: "opacity"; duration: 200; easing.type: Easing.InOutQuad }
        NumberAnimation { target: content; property: "width"; duration: 200; easing.type: Easing.InOutQuad }
    }
]

}

@

Could this be a bug, or am I missing something?