Vuetify: [Bug Report] Tab highlights do not stay in sync with tab titles

[jlynde]

Versions and Environment

Vuetify: 1.1.8
Vue: 2.5.16
Browsers: Chrome 67.0.3396.99
OS: Windows 7

Steps to reproduce

Instructions are provided in the reproduction link above as well. This example also uses vue-splitpane 1.0.2.

1. Make this window very wide so you see space around the tabs
2. Move the slider to various positions and note how the tab highlight (underline) does NOT stay in sync with the tab title
3. Even when the slider is released the highlight remains in the wrong position until a different tab is selected
4. Interesting to note that resizing the window actually does (after some short time) cause the highlight to move into the correct position

Expected Behavior

I expected the tab highlights to move and stay in sync with the tab titles as the slider was moved. At the very least, it should move into position after a short time like when the window is resized.

Actual Behavior

The highlights are not staying in sync and are not moved into position at all until a different tab is selected.

Reproduction Link

https://codesandbox.io/s/kw0257v0m3

[KaelWD]

We may add some sort of resize observer eventually, but currently tabs only listen for window resize events. As a workaround you can call the onResize() method via a ref.

[nickgr6]

My issue #7061 was closed as duplicate of this issue.
This issue is closes as 'Wont fix'. It seems however that this is actually a bug, that should be resolved. Can this issue be reopened? I am willing to make a fix for this in Vuetify myself, if that helps?

[janvorisek]

I am having a similar issue in an Electron app. While the tab component is loading I can see an empty tab for a second. Then when the tab text is rendered and the width shrinks by a few pixels, the tab highlight stays wider than the Tab item itself. It gets auto fixed on resize though.

[n-parasochka]

Hey guys! Any updates there? The same problem like above on my side

[glen-84]

@KaelWD,

Can you please reopen this issue?

Here is another example: https://codepen.io/glen-84/pen/ExPxQdZ

(click the first button to change the item data, and notice how the slider is not adjusted)

[broom9]

We are also seeing this issue. Using Vuetify 2.3.7 but have been seeing this issue for many versions.

[janvorisek]

We are having a similar issue when we are changing the locale of our application, tabs are translated correctly, but the width of the tab highlight doesn't update.

I have fixed the issue by emitting a fake resize event on the window object. This may cause unnecessary updates, but it's working for us.

// TODO: dirty workaround
// trigger resize whenever tab title gets update (ie. by changing the locale)
window.dispatchEvent(new Event("resize"));

[gunduzemreozer]

We have same problem like @janvorisek. If you give ref attribute to v-tabs, you can call onResize method of v-tabs like below.

We call this method after locale changed or resource loaded and it works. I hope that it helps to someone :) If not working directly you can try this.$nextTick method.

<v-tabs ref="tabs">
</v-tabs>

this.$refs.tabs && this.$refs.tabs.onResize();