From 1a03b9b4c089ad80797f22200d02a1f6310714d2 Mon Sep 17 00:00:00 2001
From: Jukka Raimovaara <roska@mentalhouse.fi>
Date: Wed, 20 Nov 2024 19:02:18 +0200
Subject: [PATCH 1/2] fix: useTemplateRef usage throwing errors fixes #2361

---
 .../src/components/BAlert/BAlert.vue           |  4 ++--
 .../src/components/BButton/BButton.vue         |  4 ++--
 .../src/components/BCarousel/BCarousel.vue     | 17 +++++++++++------
 .../src/components/BCollapse/BCollapse.vue     |  4 ++--
 .../src/components/BDropdown/BDropdown.vue     | 15 +++++++--------
 .../src/components/BForm/BForm.vue             |  4 ++--
 .../components/BFormCheckbox/BFormCheckbox.vue |  4 ++--
 .../BFormCheckbox/BFormCheckboxGroup.vue       |  4 ++--
 .../src/components/BFormFile/BFormFile.vue     |  4 ++--
 .../src/components/BFormGroup/BFormGroup.vue   |  6 +++---
 .../src/components/BFormInput/BFormInput.vue   |  4 ++--
 .../src/components/BFormRadio/BFormRadio.vue   |  4 ++--
 .../components/BFormRadio/BFormRadioGroup.vue  |  4 ++--
 .../src/components/BFormSelect/BFormSelect.vue |  4 ++--
 .../BFormSpinbutton/BFormSpinbutton.vue        |  4 ++--
 .../src/components/BFormTags/BFormTags.vue     |  4 ++--
 .../components/BFormTextarea/BFormTextarea.vue |  4 ++--
 .../src/components/BModal/BModal.vue           | 18 +++++++++---------
 .../src/components/BNav/BNavItemDropdown.vue   |  4 ++--
 .../src/components/BOffcanvas/BOffcanvas.vue   |  8 ++++----
 .../src/components/BPagination/BPagination.vue |  4 ++--
 .../src/components/BPopover/BPopover.vue       | 18 ++++++++++--------
 .../src/components/BTabs/BTab.vue              |  4 ++--
 .../src/components/BToast/BToast.vue           |  4 ++--
 .../src/components/BTooltip/BTooltip.vue       |  4 ++--
 25 files changed, 82 insertions(+), 76 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue b/packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue
index 8da80d102..b146e7414 100644
--- a/packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue
+++ b/packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue
@@ -2,7 +2,7 @@
   <BTransition :no-fade="!props.fade" :trans-props="{enterToClass: 'show'}">
     <div
       v-if="isAlertVisible"
-      ref="element"
+      ref="_element"
       class="alert"
       role="alert"
       aria-live="polite"
@@ -63,7 +63,7 @@ const slots = defineSlots<{
   default?: (props: Record<string, never>) => any
 }>()
 
-const element = useTemplateRef<HTMLElement>('element')
+const element = useTemplateRef<HTMLElement>('_element')
 
 const modelValue = defineModel<Exclude<BAlertProps['modelValue'], undefined>>({default: false})
 
diff --git a/packages/bootstrap-vue-next/src/components/BButton/BButton.vue b/packages/bootstrap-vue-next/src/components/BButton/BButton.vue
index 3ffb1aa0c..3c3d6d3f7 100644
--- a/packages/bootstrap-vue-next/src/components/BButton/BButton.vue
+++ b/packages/bootstrap-vue-next/src/components/BButton/BButton.vue
@@ -1,7 +1,7 @@
 <template>
   <component
     :is="computedTag"
-    ref="element"
+    ref="_element"
     class="btn"
     v-bind="linkProps"
     :class="computedClasses"
@@ -97,7 +97,7 @@ const emit = defineEmits<{
   click: [value: MouseEvent]
 }>()
 
-const element = useTemplateRef<HTMLElement | null>('element')
+const element = useTemplateRef<HTMLElement>('_element')
 
 const pressedValue = defineModel<BButtonProps['pressed']>('pressed', {default: undefined})
 
diff --git a/packages/bootstrap-vue-next/src/components/BCarousel/BCarousel.vue b/packages/bootstrap-vue-next/src/components/BCarousel/BCarousel.vue
index 88e1fb564..cf0746274 100644
--- a/packages/bootstrap-vue-next/src/components/BCarousel/BCarousel.vue
+++ b/packages/bootstrap-vue-next/src/components/BCarousel/BCarousel.vue
@@ -1,5 +1,10 @@
 <template>
-  <div :id="computedId" ref="element" class="carousel slide pointer-event" :class="computedClasses">
+  <div
+    :id="computedId"
+    ref="_element"
+    class="carousel slide pointer-event"
+    :class="computedClasses"
+  >
     <div
       v-if="props.indicators"
       class="carousel-indicators"
@@ -21,7 +26,7 @@
       />
     </div>
 
-    <div ref="relatedTarget" class="carousel-inner">
+    <div ref="_relatedTarget" class="carousel-inner">
       <TransitionGroup
         :enter-from-class="enterClasses"
         :enter-active-class="enterClasses"
@@ -39,7 +44,7 @@
           v-for="(slide, i) in slides"
           v-show="i === modelValue"
           :key="i"
-          ref="slideValues"
+          ref="_slideValues"
           :class="{active: i === modelValue && isTransitioning === false}"
           :style="props.noAnimation && {transition: 'none'}"
         />
@@ -112,7 +117,7 @@ const buttonOwnership = useId(undefined, 'carousel-button-ownership')
 
 const modelValue = defineModel<Exclude<BCarouselProps['modelValue'], undefined>>({default: 0})
 
-const slideValues = useTemplateRef<null | InstanceType<typeof BCarouselSlide>[]>('slideValues')
+const slideValues = useTemplateRef<InstanceType<typeof BCarouselSlide>[]>('_slideValues')
 
 const touchThresholdNumber = useToNumber(() => props.touchThreshold)
 const slideInterval = ref<Numberish | null>(null)
@@ -125,8 +130,8 @@ const intervalNumber = useToNumber(() => slideInterval.value ?? props.interval)
 const isTransitioning = ref(false)
 const rideStarted = ref(false)
 const direction = ref(true)
-const relatedTarget = useTemplateRef<HTMLElement>('relatedTarget')
-const element = useTemplateRef<HTMLElement>('element')
+const relatedTarget = useTemplateRef<HTMLElement>('_relatedTarget')
+const element = useTemplateRef<HTMLElement>('_element')
 const previousModelValue = ref(modelValue.value)
 
 const isHovering = useElementHover(element)
diff --git a/packages/bootstrap-vue-next/src/components/BCollapse/BCollapse.vue b/packages/bootstrap-vue-next/src/components/BCollapse/BCollapse.vue
index a86c4a419..5bb0d9179 100644
--- a/packages/bootstrap-vue-next/src/components/BCollapse/BCollapse.vue
+++ b/packages/bootstrap-vue-next/src/components/BCollapse/BCollapse.vue
@@ -11,7 +11,7 @@
       :is="props.tag"
       v-show="showRef"
       :id="computedId"
-      ref="element"
+      ref="_element"
       class="collapse"
       :class="computedClasses"
       :is-nav="props.isNav"
@@ -93,7 +93,7 @@ const modelValue = defineModel<Exclude<BCollapseProps['modelValue'], undefined>>
 
 const computedId = useId(() => props.id, 'collapse')
 
-const element = useTemplateRef<HTMLElement>('element')
+const element = useTemplateRef<HTMLElement>('_element')
 
 let inCollapse = false
 const onEnter = (el: Element) => {
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
index 80550f4ee..b8a4955b9 100644
--- a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
+++ b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
@@ -1,13 +1,12 @@
 <template>
   <ConditionalWrapper
-    ref="wrapper"
     :skip="inInputGroup || props.noWrapper"
     :class="computedClasses"
     :role="inButtonGroupAttributes?.role"
   >
     <BButton
       :id="computedId"
-      ref="splitButton"
+      ref="_splitButton"
       :variant="props.splitVariant || props.variant"
       :size="props.size"
       :class="buttonClasses"
@@ -25,7 +24,7 @@
     <BButton
       v-if="props.split"
       :id="computedId + '-split'"
-      ref="button"
+      ref="_button"
       :variant="props.variant"
       :size="props.size"
       :disabled="props.disabled"
@@ -49,7 +48,7 @@
         <ul
           v-show="showRef"
           :id="computedId + '-menu'"
-          ref="floating"
+          ref="_floating"
           :style="[floatingStyles, sizeStyles]"
           class="dropdown-menu overflow-auto"
           :class="[props.menuClass, computedMenuClasses]"
@@ -86,6 +85,7 @@ import {
   provide,
   ref,
   toRef,
+  useTemplateRef,
   watch,
 } from 'vue'
 import {useDefaults} from '../../composables/useDefaults'
@@ -177,10 +177,9 @@ const computedOffset = computed(() =>
 )
 const offsetToNumber = useToNumber(computedOffset)
 
-const floating = ref<HTMLElement | null>(null)
-const button = ref<HTMLElement | null>(null)
-const splitButton = ref<HTMLElement | null>(null)
-const wrapper = ref<HTMLElement | null>(null)
+const floating = useTemplateRef<HTMLElement>('_floating')
+const button = useTemplateRef<HTMLElement>('_button')
+const splitButton = useTemplateRef<HTMLElement>('_splitButton')
 
 const boundary = computed<Boundary | undefined>(() =>
   isBoundary(props.boundary) ? props.boundary : undefined
diff --git a/packages/bootstrap-vue-next/src/components/BForm/BForm.vue b/packages/bootstrap-vue-next/src/components/BForm/BForm.vue
index 42ef928df..abd666615 100644
--- a/packages/bootstrap-vue-next/src/components/BForm/BForm.vue
+++ b/packages/bootstrap-vue-next/src/components/BForm/BForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <form :id="props.id" ref="element" :novalidate="props.novalidate" :class="computedClasses">
+  <form :id="props.id" ref="_element" :novalidate="props.novalidate" :class="computedClasses">
     <slot />
   </form>
 </template>
@@ -17,7 +17,7 @@ const _props = withDefaults(defineProps<BFormProps>(), {
 })
 const props = useDefaults(_props, 'BForm')
 
-const element = useTemplateRef<HTMLElement>('element')
+const element = useTemplateRef<HTMLElement>('_element')
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
index 920349bb0..b9e76b61e 100644
--- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue
@@ -6,7 +6,7 @@
   >
     <input
       :id="computedId"
-      ref="input"
+      ref="_input"
       v-model="localValue"
       :class="computedInputClasses"
       type="checkbox"
@@ -94,7 +94,7 @@ const computedId = useId(() => props.id, 'form-check')
 
 const parentData = inject(checkboxGroupKey, null)
 
-const input = useTemplateRef<HTMLElement>('input')
+const input = useTemplateRef<HTMLElement>('_input')
 
 const {focused} = useFocus(input, {
   initialValue: props.autofocus,
diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
index c05b5e8f1..a4ce7310f 100644
--- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue
@@ -2,7 +2,7 @@
   <div
     v-bind="computedAttrs"
     :id="computedId"
-    ref="element"
+    ref="_element"
     role="group"
     :class="computedClasses"
     class="bv-no-focus-ring"
@@ -68,7 +68,7 @@ const modelValue = defineModel<Exclude<BFormCheckboxGroupProps['modelValue'], un
 const computedId = useId(() => props.id, 'checkbox')
 const computedName = useId(() => props.name, 'checkbox')
 
-const element = useTemplateRef<HTMLElement>('element')
+const element = useTemplateRef<HTMLElement>('_element')
 
 const {focused} = useFocus(element, {
   initialValue: props.autofocus,
diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
index d4f7fbf98..e65064100 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
@@ -13,7 +13,7 @@
   <input
     :id="computedId"
     v-bind="$attrs"
-    ref="input"
+    ref="_input"
     type="file"
     :class="computedClasses"
     :form="props.form"
@@ -84,7 +84,7 @@ const computedId = useId(() => props.id)
 
 const stateClass = useStateClass(() => props.state)
 
-const input = useTemplateRef<HTMLInputElement>('input')
+const input = useTemplateRef<HTMLInputElement>('_input')
 
 const {focused} = useFocus(input, {initialValue: props.autofocus})
 
diff --git a/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue b/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue
index 85602097a..1e2135718 100644
--- a/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormGroup/BFormGroup.vue
@@ -61,7 +61,7 @@
     </LabelContentTemplate.define>
     <BFormRow v-if="isHorizontal">
       <LabelContentTemplate.reuse />
-      <BCol v-bind="contentColProps" ref="content">
+      <BCol v-bind="contentColProps" ref="_content">
         <slot
           :id="computedId"
           :aria-describedby="null"
@@ -73,7 +73,7 @@
     </BFormRow>
     <template v-else>
       <LabelContentTemplate.reuse />
-      <div v-if="!isHorizontal && props.floating" ref="content" class="form-floating">
+      <div v-if="!isHorizontal && props.floating" ref="_content" class="form-floating">
         <slot
           :id="computedId"
           :aria-describedby="null"
@@ -206,7 +206,7 @@ const getColProps = (props: any, prefix: string) =>
     return result
   }, {})
 
-const content = useTemplateRef<HTMLElement>('content')
+const content = useTemplateRef<HTMLElement>('_content')
 
 const contentColProps = computed(() => getColProps(props, 'content'))
 const labelAlignClasses = computed(() =>
diff --git a/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue b/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue
index e67e9f107..8387323da 100644
--- a/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue
@@ -1,7 +1,7 @@
 <template>
   <input
     :id="computedId"
-    ref="input"
+    ref="_input"
     :key="forceUpdateKey"
     :value="modelValue"
     :class="computedClasses"
@@ -70,7 +70,7 @@ const [modelValue, modelModifiers] = defineModel<
   set: (v) => normalizeInput(v, modelModifiers),
 })
 
-const input = useTemplateRef<HTMLInputElement>('input')
+const input = useTemplateRef<HTMLInputElement>('_input')
 
 const {computedId, computedAriaInvalid, onInput, onChange, onBlur, focus, blur, forceUpdateKey} =
   useFormInput(props, input, modelValue, modelModifiers)
diff --git a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
index 2d07b9be2..074542180 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue
@@ -3,7 +3,7 @@
     <input
       :id="computedId"
       v-bind="$attrs"
-      ref="input"
+      ref="_input"
       v-model="localValue"
       :class="inputClasses"
       type="radio"
@@ -72,7 +72,7 @@ const computedId = useId(() => props.id, 'form-check')
 
 const parentData = inject(radioGroupKey, null)
 
-const input = useTemplateRef<HTMLElement>('input')
+const input = useTemplateRef<HTMLElement>('_input')
 
 const {focused} = useFocus(input, {
   initialValue: props.autofocus,
diff --git a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
index 551775929..10f6bc806 100644
--- a/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue
@@ -2,7 +2,7 @@
   <div
     v-bind="computedAttrs"
     :id="computedId"
-    ref="element"
+    ref="_element"
     role="radiogroup"
     :class="computedClasses"
     class="bv-no-focus-ring"
@@ -67,7 +67,7 @@ const modelValue = defineModel<Exclude<BFormRadioGroupProps['modelValue'], undef
 const computedId = useId(() => props.id, 'radio')
 const computedName = useId(() => props.name, 'checkbox')
 
-const element = useTemplateRef<HTMLElement>('element')
+const element = useTemplateRef<HTMLElement>('_element')
 
 const {focused} = useFocus(element, {
   initialValue: props.autofocus,
diff --git a/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue b/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue
index 1687b85e1..2fc7905fc 100644
--- a/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue
@@ -1,7 +1,7 @@
 <template>
   <select
     :id="computedId"
-    ref="input"
+    ref="_input"
     v-model="localValue"
     :class="computedClasses"
     :name="props.name"
@@ -88,7 +88,7 @@ const selectSizeNumber = useToNumber(() => props.selectSize)
 
 const stateClass = useStateClass(() => props.state)
 
-const input = useTemplateRef<HTMLElement>('input')
+const input = useTemplateRef<HTMLElement>('_input')
 
 const {focused} = useFocus(input, {
   initialValue: props.autofocus,
diff --git a/packages/bootstrap-vue-next/src/components/BFormSpinbutton/BFormSpinbutton.vue b/packages/bootstrap-vue-next/src/components/BFormSpinbutton/BFormSpinbutton.vue
index 9071b60fa..98438c7c3 100644
--- a/packages/bootstrap-vue-next/src/components/BFormSpinbutton/BFormSpinbutton.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormSpinbutton/BFormSpinbutton.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="element"
+    ref="_element"
     class="b-form-spinbutton form-control"
     :class="computedClasses"
     role="group"
@@ -133,7 +133,7 @@ const modelValue = defineModel<Exclude<BFormSpinbuttonProps['modelValue'], undef
   default: null,
 })
 
-const element = useTemplateRef<HTMLElement>('element')
+const element = useTemplateRef<HTMLElement>('_element')
 
 const {focused} = useFocus(element)
 
diff --git a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
index c02248915..0f2a51441 100644
--- a/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue
@@ -61,7 +61,7 @@
           <div role="group" class="d-flex">
             <input
               :id="_inputId"
-              ref="input"
+              ref="_input"
               :disabled="props.disabled"
               :value="inputValue"
               :type="props.inputType"
@@ -200,7 +200,7 @@ const limitNumber = useToNumber(() => props.limit ?? NaN)
 
 const stateClass = useStateClass(() => props.state)
 
-const input = useTemplateRef<HTMLInputElement>('input')
+const input = useTemplateRef<HTMLInputElement>('_input')
 
 const {focused} = useFocus(input, {
   initialValue: props.autofocus,
diff --git a/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue b/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue
index 98d151504..8375b4dbb 100644
--- a/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue
@@ -1,7 +1,7 @@
 <template>
   <textarea
     :id="computedId"
-    ref="input"
+    ref="_input"
     :key="forceUpdateKey"
     :class="computedClasses"
     :name="props.name || undefined"
@@ -75,7 +75,7 @@ const [modelValue, modelModifiers] = defineModel<
   set: (v) => normalizeInput(v, modelModifiers),
 })
 
-const input = useTemplateRef<HTMLTextAreaElement>('input')
+const input = useTemplateRef<HTMLTextAreaElement>('_input')
 
 const {computedId, forceUpdateKey, computedAriaInvalid, onInput, onChange, onBlur, focus, blur} =
   useFormInput(props, input, modelValue, modelModifiers)
diff --git a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
index d0ecfd8f7..5b48c1efc 100644
--- a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
+++ b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
@@ -9,7 +9,7 @@
       <div
         v-show="showRef && ((backdropReady && props.backdropFirst) || !props.backdropFirst)"
         :id="computedId"
-        ref="element"
+        ref="_element"
         class="modal"
         :class="[
           props.modalClass,
@@ -72,7 +72,7 @@
                 <slot name="cancel" v-bind="sharedSlots">
                   <BButton
                     v-if="!props.okOnly"
-                    ref="cancelButton"
+                    ref="_cancelButton"
                     :disabled="disableCancel"
                     :size="props.buttonSize"
                     :variant="props.cancelVariant"
@@ -83,7 +83,7 @@
                 </slot>
                 <slot name="ok" v-bind="sharedSlots">
                   <BButton
-                    ref="okButton"
+                    ref="_okButton"
                     :disabled="disableOk"
                     :size="props.buttonSize"
                     :variant="props.okVariant"
@@ -98,7 +98,7 @@
         </div>
         <div
           v-if="needsFallback"
-          ref="fallbackFocusElement"
+          ref="_fallbackFocusElement"
           :class="fallbackClassSelector"
           tabindex="0"
           style="width: 0; height: 0; overflow: hidden"
@@ -261,11 +261,11 @@ const computedId = useId(() => props.id, 'modal')
 // Since the modelValue that's passed from that composable is not reactive, this internal ref _is_ and thus it will trigger closing the modal
 const modelValue = defineModel<Exclude<BModalProps['modelValue'], undefined>>({default: false})
 
-const element = useTemplateRef<HTMLElement>('element')
-const fallbackFocusElement = useTemplateRef<HTMLElement>('fallbackFocusElement')
-const okButton = useTemplateRef<HTMLElement>('okButton')
-const cancelButton = useTemplateRef<HTMLElement>('cancelButton')
-const closeButton = useTemplateRef<HTMLElement>('closeButton')
+const element = useTemplateRef<HTMLElement>('_element')
+const fallbackFocusElement = useTemplateRef<HTMLElement>('_fallbackFocusElement')
+const okButton = useTemplateRef<HTMLElement>('_okButton')
+const cancelButton = useTemplateRef<HTMLElement>('_cancelButton')
+const closeButton = useTemplateRef<HTMLElement>('_closeButton')
 
 const pickFocusItem = () => {
   if (props.autofocus === false) return
diff --git a/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue b/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue
index d17c387eb..964f41c9f 100644
--- a/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue
+++ b/packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <li class="nav-item dropdown">
     <BDropdown
-      ref="dropdown"
+      ref="_dropdown"
       v-bind="props"
       v-model="modelValue"
       is-nav
@@ -95,7 +95,7 @@ defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   'toggle-text'?: (props: Record<string, never>) => any
 }>()
-const dropdown = useTemplateRef<InstanceType<typeof BDropdown>>('dropdown')
+const dropdown = useTemplateRef<InstanceType<typeof BDropdown>>('_dropdown')
 
 const hide = () => {
   dropdown.value?.hide()
diff --git a/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue b/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue
index 5bb837690..5c5288ab3 100644
--- a/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue
+++ b/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue
@@ -14,7 +14,7 @@
           isOpenByBreakpoint
         "
         :id="computedId"
-        ref="element"
+        ref="_element"
         aria-modal="true"
         role="dialog"
         :class="computedClasses"
@@ -54,7 +54,7 @@
         </template>
         <div
           v-if="needsFallback"
-          ref="fallbackFocusElement"
+          ref="_fallbackFocusElement"
           :class="fallbackClassSelector"
           tabindex="0"
           style="width: 0; height: 0; overflow: hidden"
@@ -183,8 +183,8 @@ const smallerOrEqualToBreakpoint = breakpoints.smallerOrEqual(() => props.respon
 
 const isOpenByBreakpoint = ref(props.responsive !== undefined && !smallerOrEqualToBreakpoint.value)
 
-const element = useTemplateRef<HTMLElement>('element')
-const fallbackFocusElement = useTemplateRef<HTMLElement>('fallbackFocusElement')
+const element = useTemplateRef<HTMLElement>('_element')
+const fallbackFocusElement = useTemplateRef<HTMLElement>('_fallbackFocusElement')
 
 const onAfterEnter = () => {
   nextTick(() => {
diff --git a/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue b/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue
index ad4d3847c..286ea8984 100644
--- a/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue
+++ b/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue
@@ -8,7 +8,7 @@
     @keydown="handleKeyNav"
   >
     <template v-for="page in pages" :key="`page-${page.id}`">
-      <li v-bind="page.li" ref="page-elements">
+      <li v-bind="page.li" ref="_page-elements">
         <span
           v-if="page.id === FIRST_ELLIPSIS || page.id === LAST_ELLIPSIS"
           v-bind="ellipsisProps.span"
@@ -104,7 +104,7 @@ const emit = defineEmits<{
 
 const modelValue = defineModel<Exclude<BPaginationProps['modelValue'], undefined>>({default: 1})
 
-const pageElements = useTemplateRef<HTMLLIElement[]>('page-elements')
+const pageElements = useTemplateRef<HTMLLIElement[]>('_page-elements')
 
 const limitNumber = useToNumber(() => props.limit, {nanToZero: true, method: 'parseInt'})
 const perPageNumber = useToNumber(() => props.perPage, {nanToZero: true, method: 'parseInt'})
diff --git a/packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue b/packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue
index a3c64de89..8d174db4e 100644
--- a/packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue
+++ b/packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue
@@ -1,5 +1,5 @@
 <template>
-  <span :id="computedId + '_placeholder'" ref="placeholder" />
+  <span :id="computedId + '_placeholder'" ref="_placeholder" />
   <slot name="target" :show="show" :hide="hide" :toggle="toggle" :visible="showRef" />
   <ConditionalTeleport
     :to="props.teleportTo"
@@ -10,19 +10,19 @@
         v-show="showRef && !hidden"
         :id="computedId"
         v-bind="$attrs"
-        ref="element"
+        ref="_element"
         :class="computedClasses"
         role="tooltip"
         tabindex="-1"
         :style="floatingStyles"
       >
         <div
-          ref="arrow"
+          ref="_arrow"
           :class="`${props.tooltip ? 'tooltip' : 'popover'}-arrow`"
           :style="arrowStyle"
           data-popper-arrow
         />
-        <div ref="content" class="overflow-auto" :style="sizeStyles">
+        <div ref="_content" class="overflow-auto" :style="sizeStyles">
           <template v-if="props.title || slots.title">
             <div
               class="position-sticky top-0"
@@ -75,6 +75,7 @@ import {
   ref,
   toRef,
   toValue,
+  useTemplateRef,
   watch,
 } from 'vue'
 import {useDefaults} from '../../composables/useDefaults'
@@ -165,10 +166,11 @@ const computedId = useId(() => props.id, 'popover')
 
 const hidden = ref(false)
 
-const element = ref<HTMLElement | null>(null)
-const content = ref<HTMLElement | null>(null)
-const arrow = ref<HTMLElement | null>(null)
-const placeholder = ref<HTMLElement | null>(null)
+const element = useTemplateRef<HTMLElement>('_element')
+const content = useTemplateRef<HTMLElement>('_content')
+const arrow = useTemplateRef<HTMLElement>('_arrow')
+const placeholder = useTemplateRef<HTMLElement>('_placeholder')
+
 const floatingTarget = ref<HTMLElement | null>(null)
 const trigger = ref<HTMLElement | null>(null)
 
diff --git a/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue b/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue
index 91c284cd5..2534ef6ff 100644
--- a/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue
+++ b/packages/bootstrap-vue-next/src/components/BTabs/BTab.vue
@@ -2,7 +2,7 @@
   <component
     :is="props.tag"
     :id="computedId"
-    ref="el"
+    ref="_el"
     class="tab-pane"
     :class="computedClasses"
     role="tabpanel"
@@ -56,7 +56,7 @@ const computedId = useId(() => props.id, 'tabpane')
 const computedButtonId = useId(() => props.buttonId, 'tab')
 
 const lazyRenderCompleted = ref(false)
-const el = useTemplateRef<HTMLElement | null>('el')
+const el = useTemplateRef<HTMLElement>('_el')
 
 const {onClick, ...attrs} = useAttrs()
 
diff --git a/packages/bootstrap-vue-next/src/components/BToast/BToast.vue b/packages/bootstrap-vue-next/src/components/BToast/BToast.vue
index f2f2040a9..495c51cf3 100644
--- a/packages/bootstrap-vue-next/src/components/BToast/BToast.vue
+++ b/packages/bootstrap-vue-next/src/components/BToast/BToast.vue
@@ -3,7 +3,7 @@
     <div
       v-show="isToastVisible"
       :id="props.id"
-      ref="element"
+      ref="_element"
       class="toast"
       :class="[props.toastClass, computedClasses]"
       tabindex="0"
@@ -139,7 +139,7 @@ const slots = defineSlots<{
   default?: (props: {hide: (trigger?: string) => void}) => any
 }>()
 
-const element = useTemplateRef<HTMLElement>('element')
+const element = useTemplateRef<HTMLElement>('_element')
 
 const modelValue = defineModel<Exclude<BToastProps['modelValue'], undefined>>({default: false})
 const {computedLink, computedLinkProps} = useBLinkHelper(props)
diff --git a/packages/bootstrap-vue-next/src/components/BTooltip/BTooltip.vue b/packages/bootstrap-vue-next/src/components/BTooltip/BTooltip.vue
index c642bda87..9f01861d5 100644
--- a/packages/bootstrap-vue-next/src/components/BTooltip/BTooltip.vue
+++ b/packages/bootstrap-vue-next/src/components/BTooltip/BTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-  <BPopover ref="popover" v-bind="computedProps" v-model="modelValue" tooltip>
+  <BPopover ref="_popover" v-bind="computedProps" v-model="modelValue" tooltip>
     <template v-if="slots.default" #default>
       <slot />
     </template>
@@ -75,7 +75,7 @@ const computedProps = computed<BPopoverProps>(() => {
   return {noninteractive: noninteractive !== undefined ? noninteractive : !interactive, ...rest}
 })
 
-const popover = useTemplateRef<InstanceType<typeof BPopover>>('popover')
+const popover = useTemplateRef<InstanceType<typeof BPopover>>('_popover')
 
 defineExpose({
   hide: () => {

From 6636af433717157731f1ce074fad4ad5686ba6fa Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 20 Nov 2024 11:05:25 -0600
Subject: [PATCH 2/2] chore: release main (#2362)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .release-please-manifest.json            |  4 ++--
 packages/bootstrap-vue-next/CHANGELOG.md |  7 +++++++
 packages/bootstrap-vue-next/package.json |  2 +-
 packages/nuxt/CHANGELOG.md               | 16 ++++++++++++++++
 packages/nuxt/package.json               |  2 +-
 5 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index 69b9cf69c..3b0585444 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/bootstrap-vue-next": "0.26.0",
-  "packages/nuxt": "0.26.0"
+  "packages/bootstrap-vue-next": "0.26.1",
+  "packages/nuxt": "0.26.1"
 }
diff --git a/packages/bootstrap-vue-next/CHANGELOG.md b/packages/bootstrap-vue-next/CHANGELOG.md
index 6a05abb45..0b8fb00f2 100644
--- a/packages/bootstrap-vue-next/CHANGELOG.md
+++ b/packages/bootstrap-vue-next/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.26.1](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.26.0...bootstrapvuenext-v0.26.1) (2024-11-20)
+
+
+### Bug Fixes
+
+* useTemplateRef usage throwing errors fixes [#2361](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/2361) ([1a03b9b](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/1a03b9b4c089ad80797f22200d02a1f6310714d2))
+
 ## [0.26.0](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrapvuenext-v0.25.15...bootstrapvuenext-v0.26.0) (2024-11-19)
 
 
diff --git a/packages/bootstrap-vue-next/package.json b/packages/bootstrap-vue-next/package.json
index 34dc66716..3781dd551 100644
--- a/packages/bootstrap-vue-next/package.json
+++ b/packages/bootstrap-vue-next/package.json
@@ -2,7 +2,7 @@
   "name": "bootstrap-vue-next",
   "displayName": "BootstrapVueNext",
   "description": "BootstrapVueNext is an early and lovely component library for Vue 3 & Nuxt 3 based on Bootstrap 5 and Typescript.",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "license": "MIT",
   "main": "./dist/bootstrap-vue-next.umd.js",
   "module": "./dist/bootstrap-vue-next.mjs",
diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md
index f1d40bceb..056ff31e1 100644
--- a/packages/nuxt/CHANGELOG.md
+++ b/packages/nuxt/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.26.1](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.26.0...nuxt-v0.26.1) (2024-11-20)
+
+
+### Miscellaneous Chores
+
+* **nuxt:** Synchronize main group versions
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * bootstrap-vue-next bumped to 0.26.1
+  * peerDependencies
+    * bootstrap-vue-next bumped to 0.26.1
+
 ## [0.26.0](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/nuxt-v0.25.15...nuxt-v0.26.0) (2024-11-19)
 
 
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index 49e02dacf..864c946f9 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@bootstrap-vue-next/nuxt",
   "description": "Nuxt Module for BootstrapVueNext",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "license": "MIT",
   "author": {
     "name": "Issayah",