paper-tabs element selection bar does not appear if element is initially hidden

[KyleCrowley]

Description

paper-tabs element selection bar does not appear if element is initially hidden

Expected outcome

paper-tabs selection bar should render on the selected tab if the element becomes unhidden

Actual outcome

The selection bar does not render, despite the selection being set correctly. If another paper-tab is selected, the selection bar will appear on that paper-tab, and animate from the tab without the selection bar.

Live Demo

Example: https://jsbin.com/tucihuxayo/edit?output

Steps to reproduce

1. Put a paper-tabs element on the page with at least 2 tabs.
2. Set the hidden attribute on the paper-tabs to some property (i.e. hidden:{type: Boolean, value: false})
3. Add the selected prop to the paper-tabs, initially set to 0.
4. Add iron-pages. Fill it some sort of content for each paper-tab (i.e. 2 divs for 2 tabs)
5. Trigger the hidden property to change via a paper-button, etc

(SEE THE ABOVE JSBIN FOR A DEMO)

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[akc42]

This particular issue has just hit me too as I restructured my application behind a neon-animated-pages selection.

My old structure set the tab value after the page was in view (after an ajax request for the tab data), but with the new structure an alternative page may be initially selected. So this affected page starts off hidden in certain circumstances (user reloads a url into the browser which selects the alternate page), and the ajax request to fetch the tab data is going on in the background and has completed before the user switches back to this page. In this scenario there is no selection bar at all on the tabs.

Is there anything we can do to force a repaint of the tabs. I don't really want to force it to a different value and back, because its all driven from routing.

[merlinnot]

Same thing with display: none.
Calling notifyResize() on state changes fixes the problem, bar seems to work as expected.

[ikocev]

2019 and yet still not fixed...

[rjcorwin]

I believe this is the successor to Paper Elements: https://material-components.github.io/material-components-web-components/demos/index.html