paper-tabs selected issue

[ebidel]

From @brusand on December 29, 2015 22:19

hi the community

here is a coepen to illustrate my issue 👍 http://codepen.io/burno75/pen/LGbLoM

working : remove jack paper-tab -> annick selected and content 2 displayed OK
not working : remove annick paper-tab -> KO jack paper-tab not selected (and his iron-page content1 not visible)

Any idea ?

is there any compenent like chrome tabs ?

best regards
Bruno

Copied from original issue: Polymer/polymer#3248

[bicknellr]

Hi, @brusand. The case where the first tab is removed and the other one is then selected automatically is actually a by product of IronSelectableBehavior (which paper-tabs indirectly inherits) referencing its selected node by a key, rather than keeping a direct reference - this key is, by default, the index of the item. So, when a selected item at a particular index is removed, the item assuming that index after the removal will be selected. And following that, if the last item is selected and removed, no item will be at that index after the removal and no item gets selected.

This behavior is pretty strange given that the selection changes whenever an item before the selected item in the list is removed - I'll bring it up / file an issue. For now, this means that if you would like to have different behavior for what happens when the selected item is removed you'll have to implement it yourself. (The iron-select, iron-deselect, and iron-items-changed events will be helpful here.)

However, the typical case of wanting to keep the selected item the same can be handled (with some awkwardness) using the attr-for-selected attribute. paper-tabs inherits this attribute from IronSelectableBehavior and it lets you specify the name of an attribute on the selectable nodes (paper-tabs in this case) to use as their key, rather than the index. If your objects have some sort of unique identifier (or you can generate one), you can reflect that to an attribute on the paper-tab in your dom-repeat and specify that attribute name in attr-for-selected. That way, when tabs are added or removed by the dom-repeat, the key IronSelectableBehavior uses to keep track of the selected item will be independent of the item's index.

PR #120 fixes the problem of the bar incorrectly updating when the items change. (The problem mentioned above is really outside the scope of paper-tabs.)

[brusand]

Hi @bicknellr ,

Thanks for uour detailed response, i download your fix but the issue still remain.

when i debug, it run like your first explication.

1/ onTabSelect : event.target.selected = 1 (ok the last list config)
2/ closeTab : e.model.index = 1 (ok)
3/ splice (configList) : ok
4/ configTabs.selected = e.model.index-1 (0) : ok
5/ onTabSelect : event.target.selected= 0 : ok
and here is the issue,
6/ onTabSelected(event.target.selected=1) : Ko this tab has been removed in 3/
that's run like your explain but the fix will be if the last tab removed, select the new last tab ?

[brusand]

if i add this workaround in onTabSelect, it s work like a charm

        onTabSelect: function(event, details) {
           var sel =  event.target.selected;
           if (sel === this.configs.length) {
                sel = sel -1;
                this.$.configTabs.selected = sel;
           }
           this.$.configPages.selected = "page-" + sel;
        },

[bicknellr]

Sorry about the confusing naming on that PR; it just fixes the problem of the selection bar not updating its position after the items change.

[bicknellr]

Possibly related to #91 and #97?