QML MouseArea hover stops working after changing the value when component clicked

Question

I have the following code:

...
property var isEnabled: true;

Text {
    id: iconName
    color: isEnabled ?(mouseArea.containsMouse ? "blue": "white"): "black" 
    ...
}
MouseArea {
    id: mouseArea
    anchors.fill: parent
    propagateComposedEvents: true
    hoverEnabled: true
    onClicked:{
            if(isEnabled){
                isEnabled = false;
            }else{
                isEnabled = true;
            }
        mouse.accepted = false;
    }
    ...

When I launch the application, if I hover over iconName, the color changes from blue to white (depending on whether the mouse is over the text or not).

If I click, iconName turns blue, but I was expecting to see it changes to black.

Am I missing something? Any tip?

Thanks!

Answer 1

MouseArea component might be an unexpected size. Color the MouseArea component to make sure that you are clicking in the right place, for example:

Item {
    id: topItem

    property var isEnabled: true;

    width: 50
    height:50

    Text {
        id: iconName
        color: topItem.isEnabled ?(mouseArea.containsMouse ? "blue": "white"): "black"
        text: "hello world!"
        font.pointSize: 20
    }
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        propagateComposedEvents: true
        hoverEnabled: true
        onClicked:{
                if(topItem.isEnabled){
                    topItem.isEnabled = false;
                }else{
                    topItem.isEnabled = true;
                }
            mouse.accepted = false;
        }

        Rectangle {
            anchors.fill: mouseArea
            color: "red"
            opacity: 0.2
        }
    }
}