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

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")
}
}
}