What is opposite of forceActiveFocus?

Question

I have these QML lines:

Item {
    id:container
    Rectangle {
        id:rec1
        width:20; height:20; x:20; y:20
        color:"blue"
        MouseArea {
            onClicked:rec1.forceActiveFocus();
        }
        //bla bla
    }

    Rectangle {
        id:rec2
        width:20; height:20; x:200; y:200
        color:"red"
        MouseArea {
            onClicked:rec2.forceActiveFocus();
        }
        //bla bla
    }
}

When i click one of the rectangle it gains focus and other lose focus. This is what i want, ok, but i want one rectangle lose focus when i click white space, out of rectangles and in Item, item with id:container?

What should i do into where?

Answer 1

The opposite of focus is focussing something else. If you want no rectangle to have any focus just call

container.forceActiveFocus()

Sample solution

Rectangle {
    id: container
    width: 240
    height: 240
    color: activeFocus ? "black" : "white"

    MouseArea {
        z: 1
        anchors.fill: parent
        onClicked: container.forceActiveFocus();
    }

    Rectangle {
        id:rec1
        width:20; height:20; x:20; y:20
        z: 2
        color: activeFocus ? "blue" : "lightblue"
        MouseArea {
            anchors.fill: parent
            onClicked:rec1.forceActiveFocus();
        }
        //bla bla
    }

    Rectangle {
        id:rec2
        width:20; height:20; x:200; y:200
        color: activeFocus ? "red" : "lightsalmon"
        z: 2
        MouseArea {
            anchors.fill: parent
            onClicked:rec2.forceActiveFocus();
        }

        //bla bla
    }

}