bootstrap-vue / bootstrap-vue

BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
https://bootstrap-vue.org
MIT License
14.52k stars 1.87k forks source link

b-tabs incorrect behavior when using ID html element on some (but not all) of the tabs #7026

Open rdar-lab opened 2 years ago

rdar-lab commented 2 years ago

Describe the bug

When using b-tabs if some of the tabs have IDs and some doesn't upon opening the page the active tab will automatically switch to one of the tabs without IDs. This happens if the v-model variable is bound to a variable and used for controlling the tab which will be opened.

Mitigation solution: Add ID to all the tabs

Steps to reproduce the bug

  1. Create a page with b-tabs and tabs some with IDs and some without
  2. Bind the v-model variable and set it to the first tab (0)
  3. Run and open the page

Expected behavior

The correct tab will open

Versions

Libraries:

"bootstrap": "^4.6.2",
"bootstrap-vue": "2.22.0",
"vue": "^2.7.7",

Environment:

stephanestermann commented 3 weeks ago

I had the same problem with the active element. The id element didn't not fully work for me. I had to delete the property "key" that I had to use for the v-for loop according to eslint