From a63809c21ff6998e17994bb692beaf5f122de114 Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Tue, 17 Aug 2021 17:03:27 +0200
Subject: [PATCH] Render href attributes on router-link (#7456)

While props set to null aren't rendered to the DOM, they are passed to other components as attributes if not defined as props.
This prevents vue-router from setting the attribute itself.
---
 app/src/components/v-button/v-button.vue           | 14 +++++++-------
 app/src/components/v-list/v-list-item.vue          | 10 +++++-----
 .../private/components/module-bar/module-bar.vue   |  4 ++--
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/src/components/v-button/v-button.vue b/app/src/components/v-button/v-button.vue
index 3809485642..e94c11012d 100644
--- a/app/src/components/v-button/v-button.vue
+++ b/app/src/components/v-button/v-button.vue
@@ -3,7 +3,7 @@
 		<slot name="prepend-outer" />
 		<component
 			:is="component"
-			:ref="component === 'a' ? 'noopener noreferer' : null"
+			:ref="component === 'a' ? 'noopener noreferer' : undefined"
 			v-focus="autofocus"
 			:download="download"
 			class="button"
@@ -23,9 +23,9 @@
 			]"
 			:type="type"
 			:disabled="disabled"
-			:to="to"
+			:to="to !== '' ? to : undefined"
 			:href="href"
-			:target="component === 'a' ? '_blank' : null"
+			:target="component === 'a' ? '_blank' : undefined"
 			@click="onClick"
 		>
 			<span class="content" :class="{ invisible: loading }">
@@ -89,7 +89,7 @@ export default defineComponent({
 		},
 		href: {
 			type: String,
-			default: null,
+			default: undefined,
 		},
 		active: {
 			type: Boolean,
@@ -109,7 +109,7 @@ export default defineComponent({
 		},
 		value: {
 			type: [Number, String],
-			default: null,
+			default: undefined,
 		},
 		dashed: {
 			type: Boolean,
@@ -126,7 +126,7 @@ export default defineComponent({
 		},
 		download: {
 			type: String,
-			default: null,
+			default: undefined,
 		},
 		...sizeProps,
 	},
@@ -137,7 +137,7 @@ export default defineComponent({
 		const { route: linkRoute, isActive, isExactActive } = useLink(props);
 		const sizeClass = useSizeClass(props);
 
-		const component = computed<'a' | 'router-link' | 'button'>(() => {
+		const component = computed(() => {
 			if (props.disabled) return 'button';
 			if (notEmpty(props.href)) return 'a';
 			if (props.to) return 'router-link';
diff --git a/app/src/components/v-list/v-list-item.vue b/app/src/components/v-list/v-list-item.vue
index fdac527bc4..82678525cb 100644
--- a/app/src/components/v-list/v-list-item.vue
+++ b/app/src/components/v-list/v-list-item.vue
@@ -2,7 +2,7 @@
 	<component
 		:is="component"
 		class="v-list-item"
-		:to="to"
+		:to="to !== '' ? to : undefined"
 		:class="{
 			active: isActiveRoute,
 			dense,
@@ -14,7 +14,7 @@
 		}"
 		:href="href"
 		:download="download"
-		:target="component === 'a' ? '_blank' : null"
+		:target="component === 'a' ? '_blank' : undefined"
 		@click="onClick"
 	>
 		<slot />
@@ -43,7 +43,7 @@ export default defineComponent({
 		},
 		href: {
 			type: String,
-			default: null,
+			default: undefined,
 		},
 		disabled: {
 			type: Boolean,
@@ -71,7 +71,7 @@ export default defineComponent({
 		},
 		download: {
 			type: String,
-			default: null,
+			default: undefined,
 		},
 		value: {
 			type: [String, Number],
@@ -88,7 +88,7 @@ export default defineComponent({
 
 		const { route: linkRoute, isActive, isExactActive } = useLink(props);
 
-		const component = computed<string>(() => {
+		const component = computed(() => {
 			if (props.to) return 'router-link';
 			if (props.href) return 'a';
 			return 'li';
diff --git a/app/src/views/private/components/module-bar/module-bar.vue b/app/src/views/private/components/module-bar/module-bar.vue
index 518218e2ff..078b53151f 100644
--- a/app/src/views/private/components/module-bar/module-bar.vue
+++ b/app/src/views/private/components/module-bar/module-bar.vue
@@ -52,8 +52,8 @@ export default defineComponent({
 				modules.value
 					.map((module: ModuleConfig) => ({
 						...module,
-						href: module.link || null,
-						to: module.link === undefined ? `/${module.id}` : null,
+						href: module.link,
+						to: module.link === undefined ? `/${module.id}` : '',
 					}))
 					.filter((module: ModuleConfig) => {
 						if (module.hidden !== undefined && unref(module.hidden) === true) {