From 7d20744f88e753b0536436c87579ac34f6a792d0 Mon Sep 17 00:00:00 2001
From: Jukka Raimovaara <roska@mentalhouse.fi>
Date: Tue, 3 Jun 2025 15:32:44 +0300
Subject: [PATCH 1/2] fix(BTabs): correct id/index on ssr

---
 .../src/components/BTabs/BTab.vue             | 11 ++--
 .../src/components/BTabs/BTabs.vue            | 53 +++++++++++++++----
 packages/bootstrap-vue-next/src/utils/keys.ts |  2 +-
 3 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue b/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue
index 1df481035..22f723cc2 100644
--- a/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue
+++ b/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue
@@ -52,9 +52,11 @@ const activeModel = defineModel<Exclude<BTabProps['active'], undefined>>('active
 })
 
 const parentData = inject(tabsInjectionKey, null)
-const computedId = useId(() => props.id, 'tabpane')
+
+const localId = ref(props.id)
+const internalId = useId('', 'tabpane')
+const computedId = computed(() => props.id ?? localId.value ?? internalId.value)
 const computedButtonId = useId(() => props.buttonId, 'tab')
-const internalId = useId('', 'tab-internal')
 
 const lazyRenderCompleted = ref(false)
 const el = useTemplateRef<HTMLElement>('_el')
@@ -68,7 +70,7 @@ const processedAttrs = computed(() => {
 
 function updateTab() {
   if (!parentData) return
-  parentData.registerTab(
+  const newId = parentData.registerTab(
     computed(
       () =>
         ({
@@ -87,6 +89,9 @@ function updateTab() {
         }) as TabType
     )
   )
+  if (newId !== localId.value) {
+    localId.value = newId
+  }
 }
 
 if (parentData) {
diff --git a/packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue b/packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue
index a23b5bc50..7b5caec64 100644
--- a/packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue
+++ b/packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue
@@ -42,6 +42,7 @@
             role="tab"
             :aria-controls="tab.id"
             :aria-selected="tab.active"
+            :disabled="tab.disabled"
             :tabindex="props.noKeyNav ? undefined : tab.active ? undefined : -1"
             v-bind="tab.titleLinkAttrs"
             @keydown.left.exact="!props.vertical && keynav($event, -1)"
@@ -72,9 +73,21 @@
 </template>
 
 <script setup lang="ts">
-import {computed, nextTick, provide, ref, type Ref, toRef, unref, type VNode, watch} from 'vue'
+import {
+  computed,
+  nextTick,
+  onMounted,
+  provide,
+  type Ref,
+  ref,
+  toRef,
+  unref,
+  type VNode,
+  watch,
+} from 'vue'
 import {BvEvent} from '../../utils/classes'
 import {useAlignment} from '../../composables/useAlignment'
+import {useId} from '../../composables/useId'
 import {createReusableTemplate} from '@vueuse/core'
 import type {TabType} from '../../types/Tab'
 import type {BTabsProps} from '../../types/ComponentProps'
@@ -146,11 +159,23 @@ const tabsInternal = ref<Ref<TabType>[]>([])
 
 const tabElementsArray = ref<VNode[]>([])
 
+const isChildActive = ref(false)
+const initialIds = ref<string[]>([])
+
 const updateTabElementsArray = () => {
   const tabElements = flattenFragments(slots.default?.({}) ?? [])
   tabElementsArray.value = (Array.isArray(tabElements) ? tabElements : [tabElements]).filter(
     (tab) => tab.type === BTab
   )
+  if (initialIds.value.length === 0) {
+    // we need to get the ids of the tabs before they are registered
+    initialIds.value = tabElementsArray.value.map((tab) =>
+      unref(useId(() => tab.props?.id, 'tabpane'))
+    )
+  }
+  isChildActive.value = tabElementsArray.value.some(
+    (tab) => tab.props?.active !== undefined && tab.props?.active !== false
+  )
 }
 updateTabElementsArray()
 
@@ -181,7 +206,7 @@ const tabs = computed(() => {
             ? index === activeIndex.value
             : index === 0
       return {
-        id: tab.props?.id,
+        id: tab.props?.id ?? initialIds.value[index],
         internalId: `premount-${index}`, // temporary id for the tab
         buttonId: tab.props?.buttonId,
         disabled: tab.props?.disabled,
@@ -237,9 +262,17 @@ if (activeIndex.value === -1 && activeId.value) {
   } else {
     updateInitialActiveId = true
   }
-} else if (activeIndex.value === -1 && !activeId.value) {
-  activeIndex.value = 0
-  updateInitialActiveId = true
+} else if (activeIndex.value === -1 && !activeId.value && !isChildActive.value) {
+  activeIndex.value = tabs.value.findIndex((t) => t.disabled === undefined || t.disabled === false)
+  activeId.value = tabs.value[activeIndex.value]?.id
+} else if (activeIndex.value === -1 && !activeId.value && isChildActive.value) {
+  activeIndex.value = tabs.value.findIndex(
+    (t) =>
+      t.active !== undefined &&
+      t.active !== false &&
+      (t.disabled === undefined || t.disabled === false)
+  )
+  activeId.value = tabs.value[activeIndex.value]?.id
 }
 
 function updateInitialIndexAndId() {
@@ -432,13 +465,15 @@ const registerTab = (tab: Ref<TabType>) => {
     }
   } else {
     tabsInternal.value[idx] = tab
+    if (initialized) {
+      sortTabs()
+    }
   }
-  if (initialized) {
-    sortTabs()
-  }
+  const idx2 = tabsInternal.value.findIndex((t) => t.value.internalId === tab.value.internalId)
+  return tab.value.id ?? (!initialized ? initialIds.value[idx2] : tab.value.internalId)
 }
 
-nextTick(() => {
+onMounted(() => {
   updateInitialIndexAndId()
   sortTabs()
   initialized = true
diff --git a/packages/bootstrap-vue-next/src/utils/keys.ts b/packages/bootstrap-vue-next/src/utils/keys.ts
index b6707877d..ee792e7d2 100644
--- a/packages/bootstrap-vue-next/src/utils/keys.ts
+++ b/packages/bootstrap-vue-next/src/utils/keys.ts
@@ -55,7 +55,7 @@ export const tabsInjectionKey: InjectionKey<{
   lazy: Readonly<Ref<boolean>>
   card: Readonly<Ref<boolean>>
   noFade: Readonly<Ref<boolean>>
-  registerTab: (tab: ComputedRef<TabType>) => void
+  registerTab: (tab: ComputedRef<TabType>) => string
   unregisterTab: (id: string) => void
   activateTab: (id: string | undefined) => void
   activeTabClass: Readonly<Ref<ClassValue>>

From 22c6139e706c623563c2afb6bb34634587a5a733 Mon Sep 17 00:00:00 2001
From: Jukka Raimovaara <roska@mentalhouse.fi>
Date: Tue, 3 Jun 2025 15:46:06 +0300
Subject: [PATCH 2/2] some comments

---
 packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue b/packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue
index 7b5caec64..0f8d763ba 100644
--- a/packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue
+++ b/packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue
@@ -167,8 +167,9 @@ const updateTabElementsArray = () => {
   tabElementsArray.value = (Array.isArray(tabElements) ? tabElements : [tabElements]).filter(
     (tab) => tab.type === BTab
   )
+  // only get the ids once in setup context
   if (initialIds.value.length === 0) {
-    // we need to get the ids of the tabs before they are registered
+    // we need to get the ids of the tabs before they are registered. After that we use the internalId for the tabpane
     initialIds.value = tabElementsArray.value.map((tab) =>
       unref(useId(() => tab.props?.id, 'tabpane'))
     )