Vue-material: [mdTabs] Using tab(on keyboard) on the last input element in a tab-bar breaks the tab-bar

[philipfeldmann]

Steps to reproduce

Create a tab-bar with some inputs in one of the tabs. Click in one of them and use the tab-key until you're in the last input, then hit tab again and it'll break the tab bar. You can see this here in the first Demo:
https://vuematerial.github.io/#/components/input
If you go through all the input fields in the demo example and hit tab on the last one, it will break the tab bar.

Which browser?

VueJs 2, Vue Material 0.7.1, Windows, Chrome Version 58.0.3029.81

What is expected?

What is actually happening?

I'm not sure but removing this rule seems to at least not break the tab-bar mid-way through.

.md-tabs .md-tabs-wrapper {
    width: 9999em;
}

Reproduction Link

https://vuematerial.github.io/#/components/input

[d3radicated]

Fixed via pull request #703.

[philipfeldmann]

Removing the above mentioned style doesn't fix the issue completly, it only allows the user to click on one of the tabs again to display correctly again, instead of having to reload. From my understanding it'll still be broken.

[d3radicated]

On the demo, it seems that pressing tab focuses on the "HTML" button on the other tab, thus breaking the tab. Adding tabindex="-1" to the button solves the issue but I think it needs to be handled by the framework itself.

[vdmrox]

I think there's another situation to be added to this issue: if you have more than one tab section with input fields and hit tab key while on the last of them in the "tab 1", it will send you to the second tab section. At this point, if you press the "tab section 2" button, you go to a blank area, like a tab with no content. So, #703 PR solves the breaking thing, but not entirely I guess, once the transition caused by keyboard tab hitting still makes the tab break in this case. I have a short screencast here.

I tried to find a reasonable solution to fix that, but I couldn't.

[pablohpsilva]

@vdmrox is right. @d3radicated PR solves part of the bug, but not all of it.
We'll look into that ASAP.

[suhair]

I have tabs with multiple sections containing input elements. Moving through tab keys completely breaks the tabs as said by @vdmrox. My temporary fix is to hide the other tab panel contents based on the activetab index. This prevents breaking the tabs, at least.

[Samuell1]

Closing this issue as our focus is on the new 1.0.0 version.