How to prevent core-activate event in core-list when item's paper-icon-button is clicked

Question

I've a core-list with a custom element for each item:

<core-list-dart data={{data}} on-core-activate={{onCoreActivate}}>
  <template>
    <person-item item={{model}}></person-item>
  </template>
</core-list-dart>

The custom element (person-item) has two buttons:

<polymer-element name="person-item">
  <template>
    <paper-item>
      <div>Name: {{item.name}}</div>
      <button on-click={{onItemClick}}>Click me!</button>
      <paper-icon-button icon="menu" on-click={{onItemClick}}>Click me!</paper-icon-button>
    </paper-item>
  </template>
  <script type="application/dart" src="person_item.dart"></script>
</polymer-element>

• When I click the item as expected the onCoreActivate method is called.
• When I click the item button as expected the onItemClick method is called and the onCoreActivate method is not called.
• When I click the item paper-icon-button the onItemClick method is called but also the onCoreActivate method is called.

How can I prevent the core-activate event in the third case?

I've tried to prevent the propagation of click event from the onItemClick method but without success.

I've also tried to prevent the tap event propagation but without success.

Answer 1

I remember having some ugly hacks where I was saving a flag for a given duration when the user was pressing a button in a list item. But the last time I checked (core_elements 0.4), handling click on the list itself (CoreList) was working (i.e. not on the item). Pseudo code below where I check the target item pressed by id (in my case it is a PaperIconButton but that is not relevant). I get the core-activate event when user tap somewhere else in the list but don't get it when the user tap on the button.

CoreList list = $['list'];
list.onClick.listen((Event e) {
  var target = e.target;
  if (target is Element) {
    if (target.id == "play") {
      // prevent sending the core-activate event
      e.preventDefault();

      // ... do my stuff here
    }
  }
});

Then you might wonder how we know which item the button belongs to. There are many ways. I personally store that in a data-id attribute in the item itself that I found from the targeted button ancestors.