addEventListener('core-select') fires twice for each selection

[rgthree]

The following (from the documentation) fires twice for every click of a tab (whereas, testing with a 'click' event fires only once):

var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
    console.log("Selected: " + tabs.selected);
});

[frankiefu]

This is expected. core-selector's core-select event is fired when an item's selection state is changed. This event is fired both when an item is selected or deselected. So that's why you see 2 events for a single tap, one for selected and one for deselected.

You can use isSelected from the event.detail to check the selection state.

var tabs = document.querySelector('#tabs');
tabs.addEventListener('core-select', function(e) {
  if (e.detail.isSelected) {
    console.log("Selected: " + tabs.selected);
  }
});

[rgthree]

Ah cool. Thanks for the clarification!

[robdodson]

I'd like to revisit this issue if possible because I keep getting bug reports about it: https://github.com/Polymer/docs/issues/696

Also, from one of the DAs running through the tutorial:

The double firing of events seems really weird - yes there is multiple selections from core-selector (according to the note) but I’m selecting one tab - this definitely feels like a bug and not sane.

And I personally agree, it just feels odd when I select one tab to get 2 events that I have to dig through to figure out who was clicked.

[zoechi]

I think the most convenient way to solve this would be to use two different events core-select, core-unselect. I guess most people are not interested in core-unselect but it can be convenient in some situations.