Polymer 1.0 cannot find events for paper-menu or paper-item

Question

Upgrading to Polymer 1.0, How do I listen/capture to change in "focusedItem" of iron-menu-behaviour? I cannot see any event or property change listener for an item change i.e. change in paper-item selection within a paper-menu. I cannot see any such events here: https://elements.polymer-project.org/elements/iron-menu-behavior?active=Polymer.IronMenuBehavior

Carbajal

Answer 1

I have not been able to find any documentation on this just yet (perhaps someone else may have better luck), but the events you are looking for are iron-select and iron-deselect. Both of these events use the handler format: eventHandler(e, details), in which:

• e is the CustomEvent.
• details is an object with an item property pointing to the element that was selected or deselected.

I've set up a demo on Plunker that you can play around with. It has a sample menu and will log both e and details from both iron-select and iron-deselect events to the console.

That being said, however, if you are able to avoid using the event and instead use bindings, I would recommend that route first. If this is within a custom element, you could, for example, do:

<dom-module id="my-custom-element">
  <template>
    <div>
      <span>[[selectedMessage]]</span>
      <span>[[oldSelectedMessage]]</span>
    </div>
    <paper-menu selected="{{selectedIndex}}">
      <paper-item>This is item #0</paper-item>
      <paper-item>This is item #1</paper-item>
      <paper-item>This is item #3</paper-item>
    </paper-menu>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-custom-element',
    properties: {
      selectedIndex: {
        type: Number,
        value: 0,
        observer: '_selectedIndexChanged'
      }
    },
    _selectedIndexChanged: function(newIndex, oldIndex) {
      if (typeof newIndex === 'number') {
        this.selectedMessage = 'You selected item #' + newIndex + '.';
      }
      if (typeof oldIndex === 'number') {
        this.oldSelectedMessage = 'Before, you had item #' + oldIndex + ' selected.';
      }
    }
  });
</script>

Schelling

Thanks so so much! This was very helpful for a multi-select menu. I was trying all sorts of listeners on selectedItems etc. to no avail. This worked perfectly – Underside

This maybe the chosen answer but you have to consider that I may have a function defined by me which doesn't reside inside the polymer element implementation. I am struggling to get it to work like that. – Slifka

Answer 2

I find that people often love to overcomplicate things when dealing with Polymer. Here's a simple approach:

JS

var menu = document.querySelector("#myMenu");
menu.addEventListener("iron-select", function(){
     console.log(menu.selected);                           // index
     console.log(menu.selectedItem.getAttribute("value")); // value
});

HTML

<paper-menu id="myMenu">
  <paper-item value="one">Foo</paper-item>
  <paper-item value="two">Bar</paper-item>
</paper-menu>

Workbook

yeah exactly, I am dealing with polymer and refused to wrap it up since I will have an instance of a very important object to where I will redirect the data from the UI, I can't wrap it up just like that as suggested in the selected answer. – Slifka

At first, this didn't work for me, until I discovered that I had forgotten to add: <link rel="import" href="./bower_components/paper-menu/paper-menu.html"> – Nurmi

Answer 3

There is a on-iron-select.

So you can do

      <paper-menu id="categoryMenu" on-iron-select="selectCategory">
        <template is="dom-repeat" items="{{categories}}">
          <paper-item data-type="{{item.code}}">{{item.name}}</paper-item>
        </template>
        <paper-item>More</paper-item>
      </paper-menu>

Script

app.selectCategory = function (e, item) {
    if (!app.categories) {
      return;
    }
    app.category = app.categories[app.$.categoryMenu.indexOf(item.item)];
    console.log('Select category ', app.category)
  };

But there is no doc about this,here is the line when the event is fired.

Coridon