src/views/list/ListWrapper.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watchEffect} from 'vue'
+import {ref, computed, watch, watchEffect} from 'vue'
 import {useRoute} from 'vue-router'
 
 import Message from '@/components/misc/message.vue'
@@ -88,6 +88,21 @@ const currentList = computed(() => {
 	} : store.state.currentList
 })
 
+// watchEffect would be called every time the prop would get a value assigned, even if that value was the same as before.
+// This resulted in loading and setting the list multiple times, even when navigating away from it.
+// This caused wired bugs where the list background would be set on the home page but only right after setting a new 
+// list background and then navigating to home. It also highlighted the list in the menu and didn't allow changing any
+// of it, most likely due to the rights not being properly populated.
+watch(
+	() => props.listId,
+	(listId) => {
+		loadList(listId)
+	},
+	{
+		immediate: true,
+	},
+)
+
 // call the method again if the listId changes
 watchEffect(() => loadList(props.listId))
 

src/views/list/settings/background.vue

@@ -134,6 +134,7 @@ export default {
 			const list = await this.backgroundService.update({id: backgroundId, listId: this.$route.params.listId})
 			await this.$store.dispatch(CURRENT_LIST, list)
 			this.$store.commit('namespaces/setListInNamespaceById', list)
+			this.$store.commit('lists/setList', list)
 			this.$message.success({message: this.$t('list.background.success')})
 		},
 
@@ -145,6 +146,7 @@ export default {
 			const list = await this.backgroundUploadService.create(this.$route.params.listId, this.$refs.backgroundUploadInput.files[0])
 			await this.$store.dispatch(CURRENT_LIST, list)
 			this.$store.commit('namespaces/setListInNamespaceById', list)
+			this.$store.commit('lists/setList', list)
 			this.$message.success({message: this.$t('list.background.success')})
 		},
 
@@ -152,6 +154,7 @@ export default {
 			const list = await this.listService.removeBackground(this.currentList)
 			await this.$store.dispatch(CURRENT_LIST, list)
 			this.$store.commit('namespaces/setListInNamespaceById', list)
+			this.$store.commit('lists/setList', list)
 			this.$message.success({message: this.$t('list.background.removeSuccess')})
 			this.$router.back()
 		},