Small issues with tabs

[jacquie]

Tabs with arrows could do with a little finessing

• If you programmatically select a tab that isn't in view it doesn't scroll that tab into view. You can try this out in the docs example
• If you select a tab that is partially in view in doesn't scroll to pull it completely in view
• It only recalculates the widths if the totalWidth is zero or number of tabs changes - we have an option to edit the name of the tab and to add an icon to it at certain times - I have tricked it by setting the totalWidth to 0 but that is probably not a good thing!
• Sometimes the right arrow doesn't disable when you scroll to the end. Researching that I discovered that leftScroll is not an integer so it rarely equals the exact end number for comparison.
• If you need to work with widths you have to wait for the tab to be rendered before it has a real width to work with. It might be worth making refreshTabWidths an observable so it can wait and the user can listen for it to be done.

[andrew-frueh]

Items 1 and 2 completed in #2043

[andrew-frueh]

Hey @jacquie - I'm having a hard time reproducing the 3rd item on your list where the arrows don't disable. I tried logging the values when you scroll, and I'm actually seeing integers coming through on Firefox and Chrome. But I wonder if other browsers do floating point values or something? Anyway, if that third bullet is something you could take a look at and propose a fix, would really appreciate that! Look at the _tabArrowCheck() function in tab-set.component.ts.

The other two items on the list are things that I think will either be addressed by or can role into #2045.

[jacquie]

I promise I was working on these issues a while back, and I did get a solution for the arrows not disabling item.
I will dig it out and see what I did.
Where I got completely stuck was recalculating widths after renaming - went down several rabbit holes!

[andrew-frueh]

Perfect! As you can see in my current PR, it was a HUGE rabbit hole trying to improve the width recalcuations. So I did some pretty significant rework and tried to account for plenty of use cases like adding tabs dynamically and hiding them. But I don't think I did account for tabs renaming! So that would be a great one to test and/or work into my PR by way of putting that functionality in the horizontal tabs example for us to test on.

[health-catalyst]

🎉 This issue has been resolved in version 13.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀