Trigger closing of context menu depending on position of mousedown.

[Kristoffer Strube]

Is your feature request related to a problem? Please describe.
When you click outside the context menu then the menu is first closed when onmouseup is invoked as we only subscribe to this event. This is not mimicking the behaviour of a normal mouse-based browser context menu.

Describe the solution you'd like
The solution would be to change what events we subscribe to in order to mimic normal behaviour:

1. Subscribe on onmousedown.
2. If your click starts outside the context menu then the menu is closed immediately.
3. If your click starts within the context menu then the menu is not closed unless you end the click on an option (for which we need to subscribe to onmouseup still.)

For this, we also need to keep track of if the current click was started within or without a context menu when the click is ended (onmouseup)

Describe alternatives you've considered
There are definitely many ways to implement a context menu, but this seems closer to other implementations.

Additional context
I want to use this in one of my projects that can have long drag-and-drops for which you want to close other open context menus on onmousedown which is also the standard.

I can help with the implementation. Just wanted to know if you were interested in this approach before making a fork.

[stavroskasidis]

Thank you for your feedback. I can see the use case you are describing and I find it reasonable. I would however make this change be either:
a. Backwards compatible (add option to make it work on mousedown) OR
b. Make mousedown as the default but provide an option to make it work as it used to. -> (I prefer this)

If you are willing to make a fork and implement it according to the specification above then sure, I will be happy to accept your contribution.
If not, then the soonest I could work on this is during the weekend, no ETA though.

[stavroskasidis]

Nice project btw 👍

[Kristoffer Strube]

Thanks. 😊
I have time today and tomorrow so will give it a look.
I think approach B also sounds the best.
For this to be an option should that then be decided.
a. once for all uses in the project
b. local to a template (or default template)
c. local to every instance of the ContextMenuTrigger like:

<ContextMenuTrigger CloseOnMouseUp=true>ContextHere</ContextMenuTrigger>

Of cause, the naming is up for debate with that CloseOnMouseUp which might be confusing.

[stavroskasidis]

Well, since the contexmenu itself has an boolean AutoHide property, and since you can open the menu programmatically (and have it still close automatically), the new option should not be on the ContextMenuTrigger.

Suggestion:
I think a simple enum property, something like AutoHideEvent on the ContextMenu component will suffice for now

public enum AutoHideEvent
{
     MouseDown,  //default
     MouseUp
}

Not sure if it should be included in the template though, seems a bit like overkill. It could be added later if needed.

[stavroskasidis]

Merged and working on the release

[stavroskasidis]

Released v1.10 including these changes. Thank you.

[Kristoffer Strube]

No problem. Happy to help! 🎊