Given this code:

import QtQuick
import Qt.labs.qmlmodels

Window {
    width: 640; height: 480; visible: true; color: "silver"

    FocusScope {
        id: bottomScope
        anchors.centerIn: parent
        anchors.horizontalCenterOffset: -50
        anchors.verticalCenterOffset: 50
        width: 400; height: 150

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

        TableView {
            anchors.fill: parent
            columnSpacing: 1
            rowSpacing: 1
            clip: true
            model: model

            delegate: Rectangle {
                implicitWidth: 100; implicitHeight: 50
                color: bottomScope.activeFocus ? "blue" : "white"

                Text { text: display; anchors.centerIn: parent }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        console.log("on bottom Delegate clicked")
                        bottomScope.forceActiveFocus()
                    }
                }
            }
        }
    }

    FocusScope {
        id: topScope
        anchors.centerIn: parent
        width: 400; height: 150

        Rectangle { opacity: 0.7; anchors.fill: parent; color: "#ddffff" }

        // MouseArea {
        //  id: captureMouseAreaBack
        //  anchors.fill: parent
        //  onClicked: {
        //      console.log("captureMouseAreaBack clicked")
        //      topScope.forceActiveFocus()
        //  }
        // }

        TableView {
            anchors.fill: parent
            columnSpacing: 1
            rowSpacing: 1
            clip: true
            model: model

            delegate: Rectangle {
                implicitWidth: 100; implicitHeight: 50
                color: topScope.activeFocus ? "blue" : "white"

                Text { text: display; anchors.centerIn: parent }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        console.log("on top Delegate clicked")
                        topScope.forceActiveFocus()
                    }
                }
            }
        }

        // MouseArea {
        //  id: captureMouseAreaFront
        //  anchors.fill: parent
        //  onClicked: {
        //      console.log("captureMouseAreaFront clicked")
        //      topScope.forceActiveFocus()
        //  }
        // }
    }

    TableModel {
        id: model
        TableModelColumn { display: "name" }
        rows: [
            { "name": "cat" },
            { "name": "dog" },
            { "name": "cat" },
            { "name": "dog" },
            { "name": "bird" }
        ]
    }
}

The delegates should be clickable and should set it’s TableView/FocusScope to active focus. When clicking on the delegates everything behaves as expected.

However, when clicking on the top TableView in the right area, where no delegate is present and where the TableViews are overlapping, the mouse event seems to be passed down to the bottom TableView. Why is that and how to prevent this?

When uncommenting captureMouseAreaFront ‘focus handling’ is as I would expect it to be, but the delegates are not ‘clickable’ anymore. Uncommenting captureMouseAreaBack has no effect at all, surprisingly.