Disable automatic close when clicking inside the menu

[CookedApps]

Hello. The context menu automatically closes itself when an item is clicked inside the menu. That works fine when using the provided MenuItems. But in my use case i add a ComboBox and a Button to the menu (which works fine) but i cant use it because the menu closes every time i click something inside it.

Here is an example of what i mean: Is it possible to disable this behavior and only close the menu "onOutsideClick" ?

Thanks in advance.

[pekam]

Sounds like a useful feature. We need to come up with a proper API for this, depending on if we want it to be just a boolean to toggle between two modes (close-on-click and close-on-outside-click), or if we want to provide more options.

At least one possibility for a third option comes to my mind: not closing via any event at all, giving full control for the developer by using the close() method.

Until then, you can use the low-level Element API. This should do the job:

contextMenu.getElement().setProperty("closeOn", "vaadin-overlay-outside-click");

[CookedApps]

Thanks @pekam for your workaround! I just discovered the same solution 5 minutes ago. :laughing: It would be nice to have this feature properly integrated in the API.

[t0920008899]

Hello, I need to have the contextmenu opened up on mouse-over. Currently, the only method to do so is through low-level element API. Would suggest to have proper API to do so.

[RakeshKB]

Hi, could you please tell me where should we use the code: contextMenu.getElement().setProperty("closeOn", "vaadin-overlay-outside-click"); <context-menu #basicMenu > <div>Text</div> <div>Button</div> </context-menu> I want to close the context menu only on click of the button and not on click on the text. Any help would be of great help.

[sirbris]

Hi, try setting this on the menu item: menuItem.getElement().setAttribute("onclick", "event.stopPropagation()");

[mel-dejesus]

While the open-on works, adding this value to close-on doesn't seem to keep the menu open after having clicked a child of the main menu.

<vaadin-context-menu id="siteSelect" .items=${this.siteTree} @item-selected=${this.handleSiteChange} open-on="click" close-on="vaadin-overlay-outside-click"></vaadin-context-menu>

[Alexenon]

Found a bizarre bug, where after setAttribute("onclick", "event.stopPropagation()");, the first click is not triggered at all, even with JS

Workaround:

menuItem.getElement().setAttribute("onclick", "event.stopPropagation()");
menuItem.getElement().executeJs("this.click();");

Immediately after setting the onClick attribute, to trigger a click using javascript, the click functionality works as usually.

[rmsnandha]

hi , I want avoid closing menu when outSideClick, and close menu only when APPLY button (menuItem) click ? any suggestion ?