Merge pull request bootstrap-vue-next#1458 from xvaara/dropdown-container

xvaara · web-flow · commit 0f87c885a585 · 2023-09-16T11:40:07.000+03:00
feat(BDropdown): Add container prop to dropdown
diff --git a/apps/docs/src/docs/components/dropdown.md b/apps/docs/src/docs/components/dropdown.md
@@ -330,6 +330,10 @@ By default, dropdowns are visually constrained to their clipping ancestors, whic
 
 **Note:** When `boundary` is any value other than the default of `clippingAncestors`, the style `position: static` is applied to the dropdown component's root element to allow the menu to "break out" of its scroll container. In some situations, this may affect your layout or positioning of the dropdown trigger button. In these cases, you may need to wrap your dropdown inside another element
 
+### Container element
+
+By default, dropdowns are next to the toggle button. However, you can specify a container element via the `container` prop where dropdowns will be teleported to instead. Supported values are CSS selector string, an actual DOM node or a reference to an HTML element.
+
 ### Dropdown auto close behavior
 
 By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `auto-close` property to change this behavior of the dropdown.
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
@@ -37,19 +37,21 @@
         </slot>
       </span>
     </BButton>
-    <ul
-      v-if="!lazyBoolean || modelValueBoolean"
-      v-show="lazyBoolean || modelValueBoolean"
-      ref="floating"
-      :style="floatingStyles"
-      class="dropdown-menu show"
-      :class="dropdownMenuClasses"
-      :aria-labelledby="computedId"
-      :role="role"
-      @click="onClickInside"
-    >
-      <slot :hide="close" :show="open" />
-    </ul>
+    <RenderComponentOrSkip :tag="'Teleport'" :to="container" :skip="!container">
+      <ul
+        v-if="!lazyBoolean || modelValueBoolean"
+        v-show="lazyBoolean || modelValueBoolean"
+        ref="floating"
+        :style="floatingStyles"
+        class="dropdown-menu show"
+        :class="dropdownMenuClasses"
+        :aria-labelledby="computedId"
+        :role="role"
+        @click="onClickInside"
+      >
+        <slot :hide="close" :show="open" />
+      </ul>
+    </RenderComponentOrSkip>
   </div>
 </template>
 
@@ -70,6 +72,8 @@ import {useBooleanish, useId} from '../../composables'
 import type {BDropdownProps} from '../../types'
 import {BvTriggerableEvent, dropdownInjectionKey, resolveFloatingPlacement} from '../../utils'
 import BButton from '../BButton/BButton.vue'
+import RenderComponentOrSkip from '../RenderComponentOrSkip.vue'
+
 // TODO add navigation through keyboard events
 // TODO standardize keydown vs keyup events globally
 
@@ -108,6 +112,7 @@ const props = withDefaults(defineProps<BDropdownProps>(), {
   strategy: 'absolute',
   splitTo: undefined,
   boundary: 'clippingAncestors',
+  container: undefined,
 })
 
 const emit = defineEmits<{
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/dropdown.spec.ts b/packages/bootstrap-vue-next/src/components/BDropdown/dropdown.spec.ts
@@ -466,4 +466,12 @@ describe('dropdown', () => {
     await $bbutton.trigger('click')
     expect(wrapper.emitted()).toHaveProperty('toggle')
   })
+  it('container prop to teleport to body', async () => {
+    const wrapper = mount(BDropdown, {
+      props: {container: 'body'},
+    })
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.querySelector('ul')).toBe(null)
+    expect(document.body?.querySelector('.dropdown-menu')).not.toBe(null)
+  })
 })
diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -12,6 +12,7 @@ import type {Size} from './Size'
 import type {ButtonVariant} from './ButtonVariant'
 import type {ButtonType} from './ButtonType'
 import type {Boundary, Middleware, RootBoundary, Strategy} from '@floating-ui/vue'
+import type {ComponentPublicInstance} from 'vue'
 
 export interface BLinkProps {
   active?: Booleanish
@@ -161,6 +162,7 @@ export interface BDropdownProps {
   floatingMiddleware?: Middleware[]
   splitTo?: RouteLocationRaw
   boundary?: Boundary | RootBoundary
+  container?: string | ComponentPublicInstance<HTMLElement> | HTMLElement | undefined
 }
 
 interface BToastIntermediate {
