How to handle onClick or onTriggered event for submenu?

Question

I have a hierarchy of objects and I want to select objects by a menu. Menu represents corresponding hierarchy of submenus. But if object has subobjests then corresponding menu item cannot catch mouse click event. See code below:

import QtQuick 2.13
import QtQuick.Window 2.13
import QtQuick.Controls 2.13

Window {
    visible: true
    width: 640
    height: 480

    Menu {
        id: contextMenu
        MenuItem {
            text: "Object1"
            onTriggered: console.log(text + " selected")
        }
        Menu {
            title: "Object2"
            onTriggered: console.log(title + " selected")  // Error!!! Non-existent property "onTriggered"!
            MenuItem {
                text: "SubObject1"
                onTriggered: console.log(text + " selected")
            }
            MenuItem {
                text: "SubObject2"
                onTriggered: console.log(text + " selected")
            }
        }
        MenuItem {
            text: "Object3"
            onTriggered: console.log(text + " selected")
        }
    }

    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.RightButton
        onClicked: {
            if (mouse.button === Qt.RightButton)
                contextMenu.popup()
        }
    }
}

Class Menu does not have triggered or clicked signal. Alternative variant is to add MenuItem to other MenuItem:

        MenuItem {
            text: "Object2"
            onTriggered: console.log(text + " selected")
            MenuItem {
                text: "SubObject1"
                onTriggered: console.log(text + " selected")
            }
            MenuItem {
                text: "SubObject2"
                onTriggered: console.log(text + " selected")
            }
        }

In this case the program runs but the menu looks strange: it does not have submenu and all sumenu items are located at the same place:

Is it possible to handle mouse click on menu item containing submenu?

This doesn't make sense to me - you're supposed to handle mouse clicks for sub-menu items via MenuItem, which you're already doing. What's the issue? "And if I add MenuItem to other MenuItem - QML does not show them correctly." I can't reproduce this with your example. — Mitch
I have changed the wording of the question. The problem is: the submenu opens if you hover over the menu item and nothing happens if you click on menu item containing submenu. So I want to handle mouse click and use it to select corresponding object. — Andrey Epifantsev
@AndreyEpifantsev Why do you want to get the clicked/triggered of a Menu that has MenuItems? I ask it because by design the developer is interested in clicking on the MenuItem not on the Menu. For example in your case I would be interested in the click on SubObject1 but not in Object2. — eyllanesc
Because I have Object2 and I want user to be able to select it. Objects are form hierarchy. For example in QML you can put one Rectangle inside other Rectangle. The first rectangle becomes child of the second. But they remain separate objects and in the QML vusual editor you can select them separately. — Andrey Epifantsev
Your original example works fine for me. I would suggest posting a complete minimal example that demonstrates the problem. — Mitch

Ľubomír Carik Ľubomír Carik · Accepted Answer · 2019-12-02T22:30:43

Menu has no text property. Let's try to change the log message to use title property. This may break all sub-components.

Update; Does exists this signal? What will be the purpose. Menu is the rectangle filled with items on above screenshot i.e. we can triger/click to items only.

How to handle onClick or onTriggered event for submenu?

1 Answers