Skip to content
This repository was archived by the owner on Mar 27, 2025. It is now read-only.

Commit 1773407

Browse files
committed
fix: use 'floatingStyles' over manual styles
refactor: bdropdownitem ref<null | InstanceType>
1 parent 2bfc0fa commit 1773407

File tree

3 files changed

+5
-15
lines changed

3 files changed

+5
-15
lines changed

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

+2-7
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,7 @@
4141
v-if="!lazyBoolean || modelValueBoolean"
4242
v-show="lazyBoolean || modelValueBoolean"
4343
ref="floating"
44-
:style="{
45-
position: strategy === 'absolute' ? undefined : 'fixed',
46-
top: `${y}px`,
47-
left: `${x}px`,
48-
width: 'max-content',
49-
}"
44+
:style="floatingStyles"
5045
class="dropdown-menu show"
5146
:class="dropdownMenuClasses"
5247
:aria-labelledby="computedId"
@@ -216,7 +211,7 @@ const floatingMiddleware = computed<Middleware[]>(() => {
216211
}
217212
return arr
218213
})
219-
const {x, y, strategy, update} = useFloating(referencePlacement, floating, {
214+
const {update, floatingStyles} = useFloating(referencePlacement, floating, {
220215
placement: floatingPlacement,
221216
middleware: floatingMiddleware,
222217
strategy: readonly(toRef(props, 'strategy')),

packages/bootstrap-vue-next/src/components/BNav/BNavItemDropdown.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ defineSlots<{
9090
// eslint-disable-next-line @typescript-eslint/no-explicit-any
9191
'button-content'?: (props: Record<string, never>) => any
9292
}>()
93-
const dropdown = ref<InstanceType<typeof BDropdown>>()
93+
const dropdown = ref<InstanceType<typeof BDropdown> | null>(null)
9494
9595
const close = () => {
9696
dropdown.value?.close()

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

+2-7
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,7 @@
1111
:class="computedClasses"
1212
role="tooltip"
1313
tabindex="-1"
14-
:style="{
15-
position: strategy,
16-
top: `${y}px`,
17-
left: `${x}px`,
18-
width: 'max-content',
19-
}"
14+
:style="floatingStyles"
2015
>
2116
<div
2217
ref="arrow"
@@ -309,7 +304,7 @@ const placementRef = computed(() =>
309304
isAutoPlacement.value ? undefined : (props.placement as OriginalPlacement)
310305
)
311306
312-
const {x, y, strategy, middlewareData, placement, update} = useFloating(targetTrigger, element, {
307+
const {floatingStyles, middlewareData, placement, update} = useFloating(targetTrigger, element, {
313308
placement: placementRef,
314309
middleware: floatingMiddleware,
315310
strategy: readonly(toRef(props, 'strategy')),

0 commit comments

Comments
 (0)