Merge pull request bootstrap-vue-next#1054 from xvaara/popover-dom-overflow

fix(BPopover): remove hidden element from dom

Author: VividLemon

apps/playground/src/components/Comps/TPopover.vue

@@ -196,6 +196,18 @@
           in body. {{ textValue }}
         </b-popover>
       </b-col>
+      <b-col>
+        <div style="height: 50vh; width: 400px; overflow-y: scroll; padding: 5em;">
+          <div v-for="(_, i) in Array(20)" :key="i" style="height: 100px">
+            <b-popover v-bind="vari">
+              jee
+              <template #target>
+                <b-button>hover / focus</b-button>
+              </template>
+            </b-popover>
+          </div>
+        </div>
+      </b-col>
     </b-row>
   </b-container>
 </template>
@@ -212,6 +224,15 @@ const value = ref(true)
 const textValue = ref('test <b onmouseover="alert(\'XSS testing!\')">with html</b>')
 const popoverPlacemet = ref<BPopoverPlacement>('left')
 
+const vari = ref({
+  title: 'foo',
+  container: 'body',
+  delay: {
+    show: 0,
+    hide: 0,
+  },
+})
+
 // eslint-disable-next-line no-console
 const consoleLog = (...args: unknown[]) => console.log(...args)
 </script>

packages/bootstrap-vue-next/src/components/BCollapse.vue

@@ -15,11 +15,11 @@
 </template>
 
 <script setup lang="ts">
-import {computed, nextTick, onMounted, provide, readonly, ref, toRef, watch, watchEffect} from 'vue'
+import {computed, nextTick, onMounted, provide, readonly, ref, toRef, watch} from 'vue'
 import {useBooleanish, useId} from '../composables'
 import {useEventListener, useVModel} from '@vueuse/core'
 import type {Booleanish} from '../types'
-import {BvTriggerableEvent, collapseInjectionKey} from '../utils'
+import {BvTriggerableEvent, collapseInjectionKey, getTransitionDelay} from '../utils'
 
 interface BCollapseProps {
   // appear?: Booleanish
@@ -156,16 +156,6 @@ watch([modelValue, show], () => {
   hide()
 })
 
-const getTransitionDelay = (element: HTMLElement) => {
-  const style = window.getComputedStyle(element)
-  // if multiple durations are defined, we take the first
-  const transitionDelay = style.transitionDelay.split(',')[0] || ''
-  const transitionDuration = style.transitionDuration.split(',')[0] || ''
-  const transitionDelayMs = Number(transitionDelay.slice(0, -1)) * 1000
-  const transitionDurationMs = Number(transitionDuration.slice(0, -1)) * 1000
-  return transitionDelayMs + transitionDurationMs
-}
-
 onMounted(() => {
   if (element.value === null) return
   if (!modelValueBoolean.value && toggleBoolean.value) {

packages/bootstrap-vue-next/src/components/BPopover.vue

@@ -2,8 +2,9 @@
   <span ref="placeholder" />
   <slot name="target" v-bind="{show, hide, toggle, showState}" />
   <!-- TODO: fix this clunky solution when https://github.com/vuejs/core/issues/6152 is fixed -->
-  <teleport v-if="container" :to="container">
+  <RenderComponentOrSkip :tag="'Teleport'" :to="container" :skip="!container">
     <div
+      v-if="showStateInternal"
       :id="id"
       v-bind="$attrs"
       ref="element"
@@ -52,57 +53,7 @@
         <!-- eslint-enable vue/no-v-html -->
       </template>
     </div>
-  </teleport>
-  <div
-    v-else
-    :id="id"
-    v-bind="$attrs"
-    ref="element"
-    :class="computedClasses"
-    role="tooltip"
-    tabindex="-1"
-    :style="{
-      position: strategy,
-      top: `${y ?? 0}px`,
-      left: `${x ?? 0}px`,
-      width: 'max-content',
-    }"
-  >
-    <div
-      ref="arrow"
-      :class="`${tooltipBoolean ? 'tooltip' : 'popover'}-arrow`"
-      :style="arrowStyle"
-      data-popper-arrow
-    />
-    <template v-if="title || $slots.title">
-      <div v-if="!isHtml" :class="tooltipBoolean ? 'tooltip-inner' : 'popover-header'">
-        <slot name="title">
-          {{ title }}
-        </slot>
-      </div>
-      <!-- eslint-disable vue/no-v-html -->
-      <div
-        v-else
-        :class="tooltipBoolean ? 'tooltip-inner' : 'popover-header'"
-        v-html="sanitizedTitle"
-      />
-      <!-- eslint-enable vue/no-v-html -->
-    </template>
-    <template v-if="(tooltipBoolean && !$slots.title && !title) || !tooltipBoolean">
-      <div v-if="!isHtml" :class="tooltipBoolean ? 'tooltip-inner' : 'popover-body'">
-        <slot>
-          {{ content }}
-        </slot>
-      </div>
-      <!-- eslint-disable vue/no-v-html -->
-      <div
-        v-else
-        :class="tooltipBoolean ? 'tooltip-inner' : 'popover-body'"
-        v-html="sanitizedContent"
-      />
-      <!-- eslint-enable vue/no-v-html -->
-    </template>
-  </div>
+  </RenderComponentOrSkip>
 </template>
 
 <script lang="ts" setup>
@@ -121,10 +72,15 @@ import {
   type Strategy,
   useFloating,
 } from '@floating-ui/vue'
-import {BvTriggerableEvent, IS_BROWSER, resolveBootstrapPlacement} from '../utils'
+import {
+  BvTriggerableEvent,
+  getTransitionDelay,
+  IS_BROWSER,
+  resolveBootstrapPlacement,
+} from '../utils'
 import {DefaultAllowlist, sanitizeHtml} from '../utils/sanitizer'
 import {onClickOutside, useMouseInElement} from '@vueuse/core'
-
+import RenderComponentOrSkip from './RenderComponentOrSkip.vue'
 import {
   type ComponentPublicInstance,
   computed,
@@ -148,7 +104,7 @@ interface DelayObject {
 
 interface BPopoverProps {
   modelValue?: Booleanish
-  container?: string | ComponentPublicInstance<HTMLElement> | HTMLElement | null
+  container?: string | ComponentPublicInstance<HTMLElement> | HTMLElement | undefined
   target?:
     | (() => HTMLElement | VNode)
     | string
@@ -192,7 +148,7 @@ const props = withDefaults(defineProps<BPopoverProps>(), {
   id: undefined,
   content: undefined,
   modelValue: false,
-  container: null,
+  container: undefined,
   customClass: '',
   placement: 'top',
   strategy: 'absolute',
@@ -228,6 +184,7 @@ const emit = defineEmits<BPopoverEmits>()
 
 const modelValueBoolean = useBooleanish(toRef(props, 'modelValue'))
 const showState = ref(modelValueBoolean.value)
+const showStateInternal = ref(modelValueBoolean.value)
 watchEffect(() => {
   emit('update:modelValue', showState.value)
 })
@@ -409,16 +366,20 @@ const show = () => {
     emit('show-prevented')
     return
   }
-  setTimeout(
-    () => {
-      update()
-      showState.value = true
-      nextTick(() => {
-        emit('shown', buildTriggerableEvent('shown'))
-      })
-    },
-    typeof props.delay === 'number' ? props.delay : props.delay?.show || 0
-  )
+  showStateInternal.value = true
+  nextTick(() => {
+    update()
+    setTimeout(
+      () => {
+        update()
+        showState.value = true
+        nextTick(() => {
+          emit('shown', buildTriggerableEvent('shown'))
+        })
+      },
+      typeof props.delay === 'number' ? props.delay : props.delay?.show || 0
+    )
+  })
 }
 
 const hide = (e: Event) => {
@@ -438,6 +399,12 @@ const hide = (e: Event) => {
     ) {
       showState.value = false
       nextTick(() => {
+        setTimeout(
+          () => {
+            showStateInternal.value = false
+          },
+          element.value ? getTransitionDelay(element.value) : 150
+        )
         emit('hidden', buildTriggerableEvent('hidden'))
       })
     } else {

packages/bootstrap-vue-next/src/components/RenderComponentOrSkip.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import {defineComponent, h} from 'vue'
+import {defineComponent, h, type PropType, type RendererElement, Teleport} from 'vue'
 
 export default defineComponent({
   name: 'ComponentOrEmpty',
@@ -8,13 +8,22 @@ export default defineComponent({
       type: String,
       default: 'div',
     },
+    to: {
+      type: [String, Object] as PropType<string | RendererElement | null | undefined>,
+      default: null,
+    },
     skip: {
       type: Boolean,
       default: false,
     },
   },
   setup(props, {slots, attrs}) {
-    return () => (props.skip ? slots.default?.() : h(props.tag, {...attrs}, [slots.default?.()]))
+    return () =>
+      props.skip
+        ? slots.default?.()
+        : props.tag === 'Teleport'
+        ? h(Teleport, {to: props.to}, [slots.default?.()])
+        : h(props.tag, {...attrs}, [slots.default?.()])
   },
 })
 </script>

packages/bootstrap-vue-next/src/components/popover.spec.ts

@@ -6,33 +6,35 @@ describe('popover', () => {
   enableAutoUnmount(afterEach)
 
   it('has div.popover', () => {
-    const wrapper = mount(BPopover)
+    const wrapper = mount(BPopover, {props: {modelValue: true}})
     const $div = wrapper.find('div.popover')
     expect($div.exists()).toBe(true)
   })
 
   it('has static class popover', () => {
-    const wrapper = mount(BPopover)
+    const wrapper = mount(BPopover, {props: {modelValue: true}})
     const $div = wrapper.get('div.popover')
 
     expect($div.classes()).toContain('popover')
   })
 
   it('has static class b-popover', () => {
-    const wrapper = mount(BPopover)
+    const wrapper = mount(BPopover, {
+      props: {modelValue: true},
+    })
     const $div = wrapper.get('div.popover')
 
     expect($div.classes()).toContain('b-popover')
   })
 
   it('has role tooltip', () => {
-    const wrapper = mount(BPopover)
+    const wrapper = mount(BPopover, {props: {modelValue: true}})
     const $div = wrapper.get('div.popover')
     expect($div.attributes('role')).toBe('tooltip')
   })
 
   it('has tabindex -1', () => {
-    const wrapper = mount(BPopover)
+    const wrapper = mount(BPopover, {props: {modelValue: true}})
     const $div = wrapper.get('div.popover')
 
     expect($div.attributes('tabindex')).toBe('-1')
@@ -44,9 +46,7 @@ describe('popover', () => {
   })
 
   it('has prop id', async () => {
-    const wrapper = mount(BPopover, {
-      props: {id: 'abc'},
-    })
+    const wrapper = mount(BPopover, {props: {id: 'abc', modelValue: true}})
     const $div = wrapper.get('div.popover')
 
     expect($div.attributes('id')).toBe('abc')
@@ -56,6 +56,7 @@ describe('popover', () => {
 
   it('first child contains slot title', () => {
     const wrapper = mount(BPopover, {
+      props: {modelValue: true},
       slots: {title: 'foobar'},
     })
     const $div = wrapper.get('div.popover-header')
@@ -64,15 +65,15 @@ describe('popover', () => {
 
   it('first child contains prop title', () => {
     const wrapper = mount(BPopover, {
-      props: {title: 'foobar'},
+      props: {title: 'foobar', modelValue: true},
     })
     const $div = wrapper.get('div.popover-header')
     expect($div.text()).toBe('foobar')
   })
 
   it('first child contains slot title if both slot and prop exists', () => {
     const wrapper = mount(BPopover, {
-      props: {title: 'propbar'},
+      props: {title: 'propbar', modelValue: true},
       slots: {title: 'slotbar'},
     })
     const $div = wrapper.get('div.popover-header')
@@ -81,22 +82,23 @@ describe('popover', () => {
 
   it('contains slot default', () => {
     const wrapper = mount(BPopover, {
+      props: {modelValue: true},
       slots: {default: 'foobar'},
     })
     expect(wrapper.text()).toContain('foobar')
   })
 
   it('second child contains prop content', () => {
     const wrapper = mount(BPopover, {
-      props: {content: 'foobar'},
+      props: {content: 'foobar', modelValue: true},
     })
     const $div = wrapper.get('div.popover-body')
     expect($div.text()).toBe('foobar')
   })
 
   it('contains slot default if both slot and prop exists', () => {
     const wrapper = mount(BPopover, {
-      props: {content: 'propbar'},
+      props: {content: 'propbar', modelValue: true},
       slots: {default: '<div class="trigger">slotbar</div>'},
     })
     const $div = wrapper.get('div.trigger')
@@ -105,7 +107,7 @@ describe('popover', () => {
 
   it('contains b-popover-{type} if prop variant', async () => {
     const wrapper = mount(BPopover, {
-      props: {variant: 'primary'},
+      props: {variant: 'primary', modelValue: true},
     })
     const $div = wrapper.get('div.popover')
     // console.log($div.classes())

packages/bootstrap-vue-next/src/utils/dom.ts

@@ -172,3 +172,13 @@ export const closest = (selector: string, root: Element, includeRoot = false) =>
   // the passed in root element when `includeRoot` is falsey
   return includeRoot ? el : el === root ? null : el
 }
+
+export const getTransitionDelay = (element: HTMLElement) => {
+  const style = window.getComputedStyle(element)
+  // if multiple durations are defined, we take the first
+  const transitionDelay = style.transitionDelay.split(',')[0] || ''
+  const transitionDuration = style.transitionDuration.split(',')[0] || ''
+  const transitionDelayMs = Number(transitionDelay.slice(0, -1)) * 1000
+  const transitionDurationMs = Number(transitionDuration.slice(0, -1)) * 1000
+  return transitionDelayMs + transitionDurationMs
+}