MouseArea event is propagated to its parent sibling. Why?

Question

Here's a code snippet with current form of the code

Rectangle
{
    id: menu
    GridLayout
    {
        id: layout
        columns: 4
        rows: 3

        Repeater
        {
            model: ListModel {}
            ToolButton {}
        }
        Rectangle
        {
        x: -3
        y: -33
        width: menu.width - 2
        height: menu.height + 33
        border.color: "red"
        border.width: 3
        color: "blue"
        MouseArea
        {
            x: mapToItem(menu, -5, -35).x
            y: mapToItem(menu, -5, -35).y
            width: menu.width
            height: menu.height + 35
            hoverEnabled: true
            preventStealing: true
            onEntered:console.log("onEntered")
            onExited:console.log("onExited menu mous area")
        }
        }
    }
}

The MouseArea hover event is propagated down to the ToolButtons in the layout. I don't get why. Hence, the onEntered and onExited events do not work as expected, because onExited happen inside the MouseArea when the ToolButtons are 'hovered' and tooltips are shown. In the end I need the MouseArea to be a bit wider and longer than its parent Rectangle so that once onExited is emitted the menu gets invisible. After the test with Rectangle is successfull it will make sense to make C++ type Polygon.

Answer 1

In your example, onExited must emits when entering ToolButton. According to MouseArea.exited():

Rectangle {
    width: 400; height: 400
    MouseArea {
        id: mouseArea1
        anchors.fill: parent
        hoverEnabled: true
    }
    MouseArea {
        id: mouseArea2
        width: 100; height: 100
        anchors.centerIn: parent
        hoverEnabled: true
    }
}

Moving the mouse into mouseArea2 from mouseArea1 will cause mouseArea1 to emit the exited signal.

If you do not want the exited signal to be emitted,

If instead you give the two MouseAreas a parent-child relationship, moving the mouse into mouseArea2 from mouseArea1 will not cause mouseArea1 to emit exited. Instead, they will both be considered to be simultaneously hovered.

That is, place ToolButton (and all related components) within the MouseArea. For example,

Rectangle {
    id: menu

    Rectangle {
        //some properties
        MouseArea {
            hoverEnabled: true
            //some properties

            onEntered:console.log("onEntered")
            onExited:console.log("onExited menu mous area")

            GridLayout {
                id: layout
                Repeater {
                    ToolButton {}
                }
            }
        }
    }
}