How to show a context menu on right click in TableView rowDelegate

Question

I want to show a context menu when right-clicking on TableView rows. I tried this code:

import QtQuick 2.0
import QtQuick.Controls 1.0

TableView { id: tableView
    width: 300
    height: 200

    TableViewColumn { role: 'a'; title: 'a'; width: 50 }
    TableViewColumn { role: 'b'; title: 'b'; width: 50 }
    model: ListModel {
        ListElement { a: 1; b: 2 }
        ListElement { a: 3; b: 4 }
        ListElement { a: 5; b: 6 }
        ListElement { a: 7; b: 8 }
        ListElement { a: 9; b: 10 }
        ListElement { a: 11; b: 12 }
    }

    Menu { id: contextMenu
        MenuItem {
            text: qsTr('Delete')
        }
    }

    rowDelegate: Item {
        Rectangle {
            anchors {
                left: parent.left
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
            height: parent.height
            color: styleData.selected ? 'lightblue' : 'white'
            MouseArea {
                anchors.fill: parent
                propagateComposedEvents: true
                onReleased: {
                    if (typeof styleData.row === 'number') {
                        tableView.currentRow = styleData.row
                        if (mouse.button === Qt.RightButton) { // never true
                            contextMenu.popup()
                        }
                    }
                    mouse.accepted = false
                }
            }
        }
    }
}

The context menu is not shown because the onReleased handler is not called for right-clicks.

I used propagateComposedEvents and mouse.accepted = false as suggested in the documentation here but it doesn't work anyway and I don't think that onReleased is a composed event.

I need help to make the code above work as expected.

Thank you.

Answer 1

Looks like this can be done easier:

MouseArea {
    anchors.fill: parent
    acceptedButtons: Qt.LeftButton | Qt.RightButton
    onClicked: {
        console.log("Click")
        if (mouse.button == Qt.LeftButton)
        {
            console.log("Left")
        }
        else if (mouse.button == Qt.RightButton)
        {
            console.log("Right")
        }
    }
}