QML - Connection not working for custom component

Question

I am currently learning QML and working within a stacked component (a component inside a component inside a component). I can trying to open a dialog from within this last component using a button, but currently I am just using console.log() and a text change to troubleshoot. It functions when I run a live preview on the component itself, but stops working when I run the entire window. The hover works the entire time, so the Button is getting some mouse activity. If it makes a difference, the component is being drawn inside a ListView.

Button/dialog component

Button {
    id: control
    width: control.size
    height: control.size
    text: "T"
    enabled: true
    hoverEnabled: true
    background: Rectangle {
        color: control.hovered ? Constants.colour_background : Constants.colour_backgroundLight
    }
    Dialog {
        id: dialog
        visible: false
        modal: true
        title: "Properties"
        standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel
        anchors.centerIn: Overlay.overlay
        contentItem: Rectangle {
            color: "lightskyblue"
            width: 100
            height: 100
        }
    }
    Connections {
        function onClicked() {
            console.log("test")
            control.text = "C"
        }
    }
}

First container component

Button {
    id: control
    property int size: 64
    property ListModel listModel: listModel
    enabled: true
    hoverEnabled: true
    bottomPadding: 0
    leftPadding: 0
    rightPadding: 0
    topPadding: 0
    implicitWidth: size * listModel.count
    implicitHeight: size * 2
    background: ListView {
        id: listView
        width: size * listModel.count
        height: size * 2
        anchors.left: parent.left
        anchors.top: parent.top
        orientation: ListView.Horizontal
        model: ListModel {
            id: listModel
            ListElement {}
            ListElement {}
            ListElement {}
            ListElement {}
        }
        delegate: Item {
            width: size
            height: size
            Column {
                Hurdle {}
                Button {
                    width: size
                    height: size
                }
            }
        }
    }
}

As soon as I move up out of this file and try Live Previewing to troubleshoot, the console outputting stops functioning and the text no longer changes, so it appears that the onClicked function is not being run anymore.

Answer 1

As JarMan pointed out, nesting buttons causes overlapping mouse areas, so care needs to be taken when making nesting responsible areas like I am trying.

Changing the container to a Rectangle (and commenting out the button specific lines) allows the mouse click to reach the button and run the debug code.