MultilevelMenu: Hide menu on click outside of menu

We do considered adding this behavior to the multileve menu element. However we realized it may conflict with other behavior.

If we handle the mouse click event globally and hide the menu, that will be a problem when you want to show the menu by clicking a button or menubar. You will find that you couldn’t make it work, because the menu will be hidden immediately as you have clicked somewhere out of the menu.

You can also handle the global mouse down event for the page in ForeUI to test the case, the result should be the same.

To work around this, I think you need to do something in the event handler to make sure the menu will be show AFTER the global mouse event handler invoked. Maybe using a Pause action to delay the action to show menu can do the trick.

Since the solution is not only related to the element itself but also involve other elements, we decided not to include this behavior by default, you can achieve this by with additional work.

Yes, your work around works fine 🙂

I haven’t tested how short the pause can be, but 50 ms works just fine.

Maybe I was too fast… I’ll look deeper into this and find out if it really works as I expect.

I’ve made it work with the following behavior:

If the MultilevelMenu is not visible (Menu1 = 0), the “Global Mouse Down” hides the MultilevelMenu, and then the “Selection Changed” in the MenuBar makes the MultilevelMenu visible and sets the variable Menu1 = 1.

If the MultilevelMenu is visible (Menu1 = 1), the “Selection Changed” in the MultilevelMenu is activated before the “Global Mouse Down” hides the MultilevelMenu.

It works as I expect, but can it be done in a more simple way?

To make the MenuBar work with more MultilevelMenus the condition in the Custom Event can written with some “OR” operators like this:

{Menu1} == 1 || {Menu2} == 1 || {Menu3} == 1

I’ve just tried it, and I think this behavior can be simplified like this:

Oh, yes – that’s better! Nice 🙂