Polymer - How to fire events after paper-menu item was selected

Question

I have a paper-menu with paper-items. Each item contains a paper-button. The paper-button click/tap event fires only if the button is not inside a selected paper-item.

<body>
  <template is="dom-bind" id="root">
    <paper-menu>
      <paper-item>
        Item 1 
        <paper-button id="button_1" on-tap="tapAction" raised>Button 1</paper-button>
      </paper-item>
      <paper-item>
        Item 2
        <paper-button id="button_2" on-tap="tapAction" raised>Button 2</paper-button>
      </paper-item>
      <paper-item>
        Item 3
        <paper-button id="button_3" on-tap="tapAction" raised>Button 2</paper-button>
      </paper-item>
    </paper-menu>
  </template>

  <script>
    var root = document.querySelector("#root");

    root.tapAction = function(e) {
      console.log("tapAction: ", e.target.id)
    };

  </script>
</body>

See also: http://plnkr.co/edit/vZk8gwLOxh6hxyiGPiu5

How can i trigger click/tap events on a Polymer component like paper-button after the menu item is selected?

James Hurford James Hurford · Accepted Answer · 2015-12-29T10:57:43

The

<paper-item>

seems to be blocking the activation of your

<paper-button>

elements. You can overcome this in 2 ways. First you could use the iron-activate event of

<paper-menu>

like so

<paper-menu on-iron-activate="tapAction">
    ...
</paper-menu>

or you could remove the

<paper-item>

wrappers from around

<paper-button>

which will allow them to be activated.

<paper-menu>
  <div>
    Item 1 <paper-button id="button_1" on-tap="tapAction" raised>Button 1</paper-button>
  </div>
  <div>
    Item 2
    <paper-button id="button_2" on-tap="tapAction" raised>Button 2</paper-button>
  </div>
  <div>
    Item 3
    <paper-button id="button_3" on-tap="tapAction" raised>Button 2</paper-button>
  </div>
</paper-menu>

And I don't think you need to worry about doing

var root = document.querySelector("#root");

as

<template is="dom-bind" id="root">
    ...
</template>

already does that for you, so you should be able to get away with just doing this

<script>
    root.tapAction = function(e) {
      console.log("tapAction: ", e.target.id)
    };
</script>

UPDATE:

The solution of removing

<paper-item>

and replacing it with

<div>

has it's problems as once it's selected, the selected items button will no longer be able to be activated. Don't ask me why as I only just discovered this myself. The solution of iron-activate will still fire even when the item is selected but the event.target will be the

<paper-menu>

and while you could use the selected attribute to figure out which item is selected, it's always going to be one step behind the actual selected item. So if you selected item 1, then the selected will initially be undefined, unless you preselect an item

<paper-menu selected="0">

but even then, if you select another item, the selected item in the fired event will still be the previous one. You'll have to experiment, but I might suggest you try something else, as

<paper-menu>

might not fit the purpose you are wanting to use it for, if you're wanting to use

<paper-button>

elements.

Polymer - How to fire events after paper-menu item was selected

1 Answers