fix: buttonlinks not being real links + dropdowns not aligning correctly (#7206)

* fix some ButtonLinks not being links

* fix comboboxes not aligning correctly immediately

* prepr

packages/ui/src/components/base/Combobox.vue

@@ -478,7 +478,7 @@ function setInitialFocus() {
 
 function determineOpenDirection(
 	triggerRect: DOMRect,
-	dropdownRect: DOMRect,
+	dropdownRect: { width: number; height: number },
 	viewport: ViewportRect,
 ): 'up' | 'down' {
 	if (props.forceDirection) {
@@ -499,7 +499,7 @@ function determineOpenDirection(
 
 function calculateVerticalPosition(
 	triggerRect: DOMRect,
-	dropdownRect: DOMRect,
+	dropdownRect: { width: number; height: number },
 	direction: 'up' | 'down',
 	viewport: ViewportRect,
 ): number {
@@ -513,7 +513,7 @@ function calculateVerticalPosition(
 
 function calculateHorizontalPosition(
 	triggerRect: DOMRect,
-	dropdownRect: DOMRect,
+	dropdownRect: { width: number; height: number },
 	viewport: ViewportRect,
 ): number {
 	const minLeft = viewport.offsetLeft + DROPDOWN_VIEWPORT_MARGIN
@@ -556,7 +556,7 @@ async function updateDropdownPosition() {
 	await nextTick()
 
 	const triggerRect = effectiveTriggerEl.value.getBoundingClientRect()
-	const width = resolveDropdownWidth(triggerRect.width)
+	const width = resolveDropdownWidth(effectiveTriggerEl.value.offsetWidth)
 	const minWidth = resolveCssSize(props.dropdownMinWidth) ?? '0px'
 
 	dropdownStyle.value = {
@@ -567,7 +567,10 @@ async function updateDropdownPosition() {
 
 	await nextTick()
 
-	const dropdownRect = dropdownRef.value.getBoundingClientRect()
+	const dropdownRect = {
+		width: dropdownRef.value.offsetWidth,
+		height: dropdownRef.value.offsetHeight,
+	}
 	const viewport = getViewportRect()
 
 	const direction = determineOpenDirection(triggerRect, dropdownRect, viewport)

packages/ui/src/components/base/buttons/ButtonLink.vue

@@ -38,6 +38,11 @@ const resolvedRel = computed(() => {
 	return props.target === '_blank' ? 'noopener noreferrer' : undefined
 })
 
+// https://github.com/vuejs/vue-router/issues/2005 moment
+const linkAttrs = computed(() =>
+	usesRouter.value ? { to: props.to } : !props.disabled ? { href: props.href } : {},
+)
+
 function handleClick(event: MouseEvent) {
 	if (!props.disabled) return
 	event.preventDefault()
@@ -52,8 +57,7 @@ function handleClick(event: MouseEvent) {
 		:color="props.color"
 		:size="props.size"
 		:interaction="props.interaction"
-		:to="usesRouter ? props.to : undefined"
-		:href="!usesRouter && !props.disabled ? props.href : undefined"
+		v-bind="linkAttrs"
 		:target="props.target"
 		:rel="resolvedRel"
 		:download="!props.disabled ? props.download : undefined"