You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Opening Event · Vaadin
Vaadin Elements - Context Menu - Opening Event

Opening Event

By default, vaadin-context-menu opens the menu overlay on the vaadin-contextmenu event.

vaadin-contextmenu is a gesture event (a custom event fired by Polymer), that is dispatched after both contextmenu and long touch events. This enables support for both mouse and touch environments in a uniform way.

Closing Event

vaadin-context-menu closes the menu overlay when the user clicks on a menu item. Additionally, the menu overlay is closed after clicking outside the overlay or by pressing the Esc button.

Overriding Opening and Closing Events

You can override the default events used for opening and closing the menu by using the openOn and the closeOn properties, respectively. In the following example, the context menu opens with a left mouse click on the button. In addition, the closing event name is set to "none", which is never dispatched, therefore the menu will not automatically close after clicking a menu item:

<vaadin-context-menu selector="button" open-on="click" close-on="none">
  <template>
    <paper-menu>
      <paper-item>First menu item</paper-item>
      <paper-item>Second menu item</paper-item>
    </paper-menu>
  </template>

  <button>Show Context Menu</button>
</vaadin-context-menu>

JavaScript API

It is also possible to open and close the menu with JavaScript API. You can call the open([parameter]#e: Event)# and close() methods directly. Use the opened property to check if the menu was already opened.

In the following example, the menu is toggled with a button click:

<vaadin-context-menu id="buttonMenu">
  <template>
    <paper-menu>
      <paper-item>First menu item</paper-item>
      <paper-item>Second menu item</paper-item>
    </paper-menu>
  </template>
</vaadin-context-menu>

<button id="menuOpener">Toggle Context Menu</button>

<script>
  document.querySelector('#menuOpener').addEventListener('click', function(event) {
    var menu = document.querySelector('#buttonMenu');
    if (!menu.opened) {
      menu.open(event);
    } else {
      menu.close();
    }
  });
</script>
The open(e: Event) method requires an Event argument to extract the menu context and coordinates from.