Vuetify: [Bug Report] Tabs component is broken with vue-router (tabs slides off screen)

Created on 12 Apr 2018 · 10Comments · Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.0.14
Vue: 2.5.16
Browsers: Chrome 65.0.3325.181
OS: Windows 7

Steps to reproduce

Create a v-tabs component using the :to prop to integrate with vue-router
Go to a path specified on one of the tabs (open url in browser, not click on the tab)

Expected Behavior

Active tab to be selected without any animation.

Actual Behavior

The entire tab component does a slide-x animation to the left on initial page load and each time the tab component is re-created (e.g. after toggling it with v-if).

Reproduction Link

https://codepen.io/anon/pen/aYxqvb

Other comments

In my code pen you can reproduce it when it is initially loading or by clicking the "Toggle tabs" button. Try moving the :to="{ path: '/' }" to the last tab to see how this effects the bug. It slides farther off screen and ends up hiding the first two tabs completely.

This bug is quite serious as it makes the tabs component useless with vue-router in the current version.

critical bug

Source

sindrepm

👍7

Most helpful comment

@blalan You could just click the button

KaelWD on 13 Apr 2018

😄2

All 10 comments

I also confirm this bug.
The bug was added (started to appear) only on 1.0.14. If you switch to 1.0.13 it disappears.
The bug reproducible on Windows 10 (latest MS Edge and Chrome), Ubuntu 17.10 (latest Chrome and Firefox).

greenya on 12 Apr 2018

👍2

It also occurs without a router. See: https://codesandbox.io/s/oo0k58kvv6

Click on the last item in tab-bar. The whole tab-bar slides offscreen.

krisl21 on 13 Apr 2018

Have same issue as krisl, not using router and its in a modal. Commenting for notification when closed. Thanks!

blalan on 13 Apr 2018

@blalan You could just click the button

KaelWD on 13 Apr 2018

😄2

Thank you, @greenya switching back to v1.0.13 fixed this issue!

Waiting for new release with this bug fix.

mumairofficial on 16 Apr 2018

Awesome! Works like a charm.

logiclabs on 17 Apr 2018

😕1 🎉1

the v1.0.15 fixed this issue

throrin19 on 18 Apr 2018

The fix doesn't work as expected. See: https://91kpzxkmlo.codesandbox.io/
The tabs don't slide to the left. Click the last one for example (on a mobile device). The last tab is almost out of visible range.

krisl21 on 18 Apr 2018

👍1

@krisl21 If you are still having issues with this, please create a new issue from https://issues.vuetifyjs.com