paper-tabs ontap listener doesn't work on first click on paper-tab entry

[Constantin Gaul]

Hi there,
I observe a strange behaviour in the paper-tabs ontap listener: When I register listeners on a "paper-tabs" menu, changing the tabs selection bar color, the color does not change on the first, but only on the second click on a tab. This means that the color change on the selection bar always lags exactly one click behind - so e.g. when I click on Tab-1 first, and then on Tab-2, the color change of Tab-1 is applied first and only after a second click on Tab-2, the correct Tab-2 specific color is applied.

For the menu itself I made a component like this which uses the {{selected}} variable to specify the currently selected tab:

<dom-module id="my-menu">

<template>
    <paper-tabs id="my_menu" noink selected={{selected}}>
        <paper-tab id="tab1">Tab-1</paper-tab>
        <paper-tab id="tab2">Tab-2</paper-tab>
        <paper-tab id="tab3">Tab-3</paper-tab>
     </paper-tabs>
</template>

<script>
    My_Menu = Polymer({
        is: 'my-menu',

        properties: {
            selected: Number,
            value: 0
        },
        listeners:{
            'my_menu.tap': 'handleMenuTap'
        },
        handleMenuTap: function(e) {
            console.info("HandleMenuTap happened");
            console.info(this.selected);
            if(this.selected == 0){
                this.customStyle['--paper-tabs-selection-bar-color'] = 'red';
            }
            if(this.selected == 1){
                this.customStyle['--paper-tabs-selection-bar-color'] = 'blue';
            }
            if(this.selected == 2){
                this.customStyle['--paper-tabs-selection-bar-color'] = 'green';
            }
            this.updateStyles();
        }
    });

    var my_menu = new My_Menu();

  </script>

</dom-module>

In my index.html body, I call the menu like this:

<my-menu selected=0></my-menu>

I'm relatively new to Webcomponents and JavaScript in general. If you think that this is not the right approach at all, please also tell me. ;)

Thanks in advance!
Constantin

[Eric Bidelman]

http://jsbin.com/yohusonejo/edit?html,output seems to be working as expected for me.

The yellow bar is the tab's default underline color. If you want it to be something else at load time, you can call

your handleMenuTap() when the element is attached:

attached: function() {

  this.handleMenuTap();

 },

 

+Steve Orvell in case there's a better way to do this in custom properties / css land. It would be sweet if this worked:

<style>

  :host([selected="0"]) {

    --paper-tabs-selection-bar-color: red;

  }

  :host([selected="1"]) {

    --paper-tabs-selection-bar-color: blue;

  }

  :host([selected="2"]) {

    --paper-tabs-selection-bar-color: green;

  }

</style>

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/d1537da1-d8fa-4b8e-a8cf-dea20e8b5a6c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.