paper-tabs
paper-tabs copied to clipboard
PolymerElements
Initial selected item is not highlighted
When I set the selected attribute the first time (e.g. hardcoding it in the markup, or binding it to a property which has value whe the element is attached), the selected tab is not highlited with the selection bar.
If I changed the selected attribute afterwards, it works fine.
(version 1.0.0)
Looks like the problem is that for the first _onTabChanged call, here, we get a 0x0 rectangle:
var r = this.$.tabsContent.getBoundingClientRect();
which results in a division by zero few lines later.
Which happens because the initial iron-select event gets triggered before my paper-tabs element is attached to the DOM (it's behind a dom-if template in my case).
I have no issue with selection bar. But tab label text is not bold (on initial selection), even when I manually set paper-tab focused property to true. In subsequent selections, tab label text is correctly bold.
I fixed this in PR https://github.com/PolymerElements/paper-tabs/pull/32 but I'm yet to add tests. I suspect that the same issue is causing what @seahrh reported.
@seahrh, can you check it with my branch: https://github.com/sevcsik/paper-tabs/tree/patch-1?
Can we see about getting this merged? It has been months and it has now been hit by several users. Mentioning @cdata to get some team members attention that has been active in this repo :)
Worth noting, I worked around this in my case by adding:
this.$.tabs._selectSelected();
to the last line of my tabs parent elements attached() callback. I realize this is calling private API but it was a temporary (hopefully) solution to the problem.
Still not working.
The only workaround that works for me is calling notifyResize() in a setTimeout of 1 ms.
@bicknellr @frankiefu @notwaldorf @e111077 this seems like it should be re-opened. Could one of you pls take a look when possible, or let me know who to ping? Thanks!
Indeed still not working. The notifyResize() from a setTimeout isn't a 100% work-around either. I've seen it work, but after adding some more (other) components, it broke, and I can't get it back :(
The notifyResize() with a setTimeout also didnt solve it for all browsers i later found out.
We've recently switched our project to a build with webpack, and mysteriously the issue isnt present anymore. Maybe that points someone in the right direction?