Your code should be fine. I think that the console.log() command is just in the wrong place.

If I understood correctly, there are two user interactions involved. The first one is the click on the mouse area, which opens the menu. The second one is a click on a particular menu item, which actually sets the test value.

Let's say you are performing the first interaction for the first time. At this point, the variable hasn't been set as you haven't clicked on a menu item yet. That is why the output of the console.log() command will be undefined. Then, you click on a menu item, which sets the variable. However, you won't be able to see the change until the menu is closed and you perform another click on the mouse area to make the menu pop up again.

I think you'll see that your code works if you move the console.log() command to a different place:

id: mouseArea1 property var testValue; onClicked: { menu.popup(); } Menu { id: menu MenuItem { text: "Option1" onTriggered: { mouseArea1.testValue= "25"; console.log(mouseArea1.testValue); } } }

I don't know how many menu items you have in your actual code. Doing it this way, you'd need to add the same line to the onTriggered() signal handlers on all MenuItem instances, which could be annoying and bloat your code unnecessarily. So I'd suggest doing this instead:

id: mouseArea1 property var testValue; onClicked: { menu.popup(); } Menu { id: menu MenuItem { text: "Option1" onTriggered: { mouseArea1.testValue= "25"; } } onClosed: { console.log(mouseArea1.testValue); } }

I am assuming that the menu is closed once you hit a menu item. The code above logs the variable once the menu emits a closed() signal. I haven't tried it myself, but it should work. :)

@mrjj
I have the following stylesheet applied to a containing widget

QMenu, QMenu QPushButton { background-color: #303030; color: white }

When I remove the QMenu selector, the white line disappears (hence it starts looking like this)
10a42cae-0e1b-4d97-88b6-eacbaec7e038-image.png

I cannot say whether the white line really disappears or it just blends with the white color of the menu item.

After applying the same style with a QMenu::item selector, I get the following:
5ffa874d-36f1-4742-a31a-078469ec6e2f-image.png
The ordinary menu items are colored, but those created by my class are not. It appears as if the ::menuItem selector does not work on them.

I also tried setting the following style rule on the container returned by the createWidget function

container->setStyleSheet(".MenuItem {background-color: #303030; color: white; }");

and it oddly makes the custom menu items get shifted to the left and the hover effects on them do not seem to work any longer. Applying padding/margin does not fix it:

4132b0aa-b742-4af9-aa91-eeeb961b6aab-image.png

Just changing MenuItem to CheckBox does the job. Menu stays as long as you clicking CheckBox items:

Menu { CheckBox { text: "Item A" checkable: true checked: false onCheckedChanged: { console.debug("item A", checked) } } CheckBox { text: "Item B" checkable: true checked: false onCheckedChanged: { console.debug("item B", checked) } } }

This topic is still high in search results, so I think it would be helpful to post correct answer. Despite question is old it is still useful.