vaadin-tabs web component v2.1.1 ES module

Flow
1

the example provided by vaadin :

<vaadin-tabs selected="{{page}}">
  <vaadin-tab>Page 1</vaadin-tab>
  <vaadin-tab>Page 2</vaadin-tab>
  <vaadin-tab>Page 3</vaadin-tab>
  <vaadin-tab>Page 4</vaadin-tab>
</vaadin-tabs>
<iron-pages selected="[[page]
]">
  <page><h3>Page 1</h3>Hello World</page>
  <page><h3>Page 2</h3>Hi All</page>
  <page><h3>Page 3</h3>Good Morning</page>
  <page><h3>Page 4</h3>Welcome</page>
</iron-pages>

Tabs are displayed but none is selected.
Navigation visual rendering seems to work fine.

iron-pages is imported (import ‘@polymer/iron-pages/iron-pages.js’:wink:
and vaadin-tabs too (import ‘@vaadin/vaadin-tabs/vaadin-tabs.js’:wink:

Console log error message :

Uncaught TypeError: Cannot read property 'disabled' of undefined
    at idx._getAvailableIndex.item (vaadin-list-mixin.js:178)
    at HTMLElement._getAvailableIndex (vaadin-list-mixin.js:169)
    at HTMLElement._setFocusable (vaadin-list-mixin.js:178)
    at HTMLElement._enhanceItems (vaadin-list-mixin.js:83)
    at Object.runMethodEffect [as fn]
 (property-effects.js:902)
    at runEffectsForProperty (property-effects.js:165)
    at runEffects (property-effects.js:127)
    at HTMLElement._propertiesChanged (property-effects.js:1842)
    at HTMLElement._flushProperties (properties-changed.js:387)
    at HTMLElement._flushProperties (property-effects.js:1674)

What did i miss ?

2

Hi, could you reproduce the issue using this demo?
https://glitch.com/edit/#!/shell-cannon?path=app.js:22:0
You can see this code working here: https://shell-cannon.glitch.me

Please press “Remix Project” at the top left menu to edit the code and share your results.
And if you have a reproduction, please submit an issue to https://github.com/vaadin/vaadin-tabs

3

Hi,

I ve refactored the code regarding your example and it works.

Thanks