[Bug Report] Deleting a tab in v-tabs causes errors

[danbaechtold]

Versions and Environment

Vuetify: 1.3.5
Vue: 2.5.17
Browsers: Chrome 70.0.3538.77
OS: Windows 10

Steps to reproduce

Deleting tab(s) will cause different errors

Case A shows what happens out of the box, while Case B is my attempt to change the active tab before it get's removed, which helps a bit, but there are still errors left.

Case A) Without manually changing "active"

("Preset active" checkbox unchecked)

Bug 1:

• Steps: Add 3 tabs, press "DEL TAB 1"
• Result (Bug): The 3rd tab is removed and 2nd is activated, but "active" stays on "2", and the slider stays on the 3rd entry

Bug 2:

• Steps: Add 3 tabs, select the first one, press "DEL TAB 0", and then try to change tabs
• Result (Bug): Slider will not move anymore, and when clicking a tab, it will select the other one instead

Case B) Manually changing "active" before removing a tab

("Preset active" checkbox checked)

Bug3:

• Steps: Add 3 tabs, select the first one, press "DEL TAB 1", and then try to change tabs
• Result (Bug): Tabs won't react to clicks anymore

Expected Behavior

When removing tab(s), "active" should be recalculated and set automatically (see Chrome browser tabs as an example which tab should be the next active one)

Actual Behavior

After tab(s) are being removed, "active" is wrong, the slider will be at the wrong place, and tab changes will no longer work or have unexpected behavior (select wrong one etc)

Reproduction Link

https://codepen.io/anon/pen/yQBEmz?editors=1010

[Made-of-Clay]

I am experiencing a similar issue (Bug 1).

I have an array of details rendering to the tabs; and when the array of details changes, the slider doesn't move. (e.g. array of 5 items w/ 5th item selected, then array of 2 items - nothing selected and slider at phantom 5th item).

(Yes, I see you've added the milestone for 1.3.x - just sharing)

[johnleider]

I have a fix for this going into #6606 with 1 caveat for Case A. The v-tab and v-tab-item components must have a declared value. The reason for this is when implicit values are used (the tabs index) and you select let's say value 2. When you remove another tab, the component still assumes its value is 2, even though 2 is not valid anymore.

Alternatively you could obviously manually change the value to the new index but I'd still recommend the above process.

[danbaechtold]

@johnleider Thanks! I can very well understand why the values would be required, and would just do it this way.

[johnleider]

Fixed in f22d754

[jgradzki]

@johnleider Is this fix going to be included into 1.x or 2.x only?

[jacekkarczmarczyk]

2.0

[gijswijs]

v-tab and v-tab-item components must have a declared value

@johnleider Am I right in assuming that you can only declared values in v-tab-item?
I've been struggling with a set-up that doesn't use v-tab-items (so only the v-tabs) but I can't get it to work.

[gijswijs]

Am I right in assuming that you can only declared values in v-tab-item?

I was not right
This was the type of question, that by asking it, put me on the right track. I'm sorry, I've should have first asked it to my rubber ducky.

In v-tabs you can use a declared value by using the h-ref property, like so

:href="`#tab-${i}`"

The value of the bound model now becomes tab-${i} (so without the hash) once a tab becomes active.