Polymer paper-tabs show the previous tab when tapping

Question

Here is my code

//...

    <paper-tabs
      selected="{{tab}}"
      on-tap="{{handleTab}}">
      <template repeat="{{initial in pagination}}">
        <paper-tab
          name="{{initial}}">
          {{initial}}
        </paper-tab>
      </template>
    </paper-tabs>

//...

tab: "A",

pagination: [
  'A',
  'B',
  'C'
],

handleTab: function (event, detail, sender) {
  console.log(sender.selected);
},

//...

By default it is 'A'. When I tap 'B', the console will show 'A'; then I tap 'C', the console will show 'B'; then I tap 'C' again, the console will show 'C'. It always show the tab name before tap.

Any idea?

Answer 1

<paper-tabs on-core-select="{{handleTab}}">
  <!-- ... -->
</paper-tabs>

From core-select event description: “Fired when an item's selection state is changed. This event is fired both when an item is selected or deselected. The isSelected detail property contains the selection state.”

handleTab: function (event, detail, sender) {
  if (detail.isSelected) {
    console.log(detail.item);
  }
}