exclude route components from keep-alive

frontend/src/App.vue

@@ -22,8 +22,8 @@
   </nav>
   <AlertDisplay/>
   <div class="container mt-2">
-    <router-view v-slot="{Component}" :key="routerViewKey">
-      <keep-alive>
+    <router-view v-slot="{Component}">
+      <keep-alive :exclude="nonCachedRouteComponents">
         <component :is="Component"/>
       </keep-alive>
     </router-view>
@@ -60,8 +60,7 @@ export default {
     return {
       activeSchema: null,
       schemaDetails: {},
-      apiInfo: null,
-      routerViewKey: null,
+      apiInfo: null
     }
   },
   provide() {
@@ -84,8 +83,8 @@ export default {
       }
       return _avail_schemas
     },
-    nonCachedRouteNames () {
-      return this.$router.options.routes.filter(route => !route.cached).map(route => route.name);
+    nonCachedRouteComponents () {
+      return this.$router.options.routes.filter(route => !route.cached).map(route => route.component.name);
     },
   },
   methods: {
@@ -103,25 +102,11 @@ export default {
       }
 
       this.activeSchema = this.schemaDetails[schemaSlug];
-    },
-    async setRouterViewKey() {
-      // We are binding routerViewKey to <router-view> component in order to trigger an instance replacement
-      // on route change. We are doing this only for routes we don't want to get cached.
-      if (this.nonCachedRouteNames.includes(this.$route.name)) {
-        this.routerViewKey = this.$route.fullPath;
-      } else if (this.routerViewKey !== null) {
-        this.routerViewKey = null;
-      }
     }
   },
   watch: {
     $route: {
-      async handler(oldValue, newValue) {
-        if (oldValue !== newValue) {
-          await this.setRouterViewKey(); // run this first in order to not trigger unnecessary reloads.
-          await this.getSchemaFromRoute();
-        }
-      },
+      handler: "getSchemaFromRoute",
       immediate: true, // runs immediately with mount() instead of calling method on mount hook
     },
   },

frontend/src/components/Entity.vue

@@ -103,9 +103,10 @@ export default {
       if (newValue?.name) {
         document.title = newValue.name;
       }
-    }, 
-    async "$route.params.entitySlug"() {
-      await this.updateEntity();
+    },
+    $route: {
+      handler: "updateEntity",
+      immediate: true
     },
   }
 };

frontend/src/components/EntityList.vue

@@ -90,6 +90,9 @@ export default {
       return this.numSelected === 1 ? 'entity' : 'entities'
     }
   },
+  activated() {
+    this.getEntities({resetPage: false});
+  },
   watch: {
     currentPage(oldPage, newPage) {
       if (oldPage !== newPage) {

frontend/src/components/inputs/ReferencedEntitySelect.vue

@@ -57,7 +57,8 @@ export default {
             text: "Apply",
             callback: this.onSelect
           })
-      ]
+      ],
+      currentEntitySlug: this.$route.params.entitySlug,
     }
   },
   activated() {
@@ -78,6 +79,11 @@ export default {
       if (!this.modelValue) {
         return;
       }
+      if (this.currentEntitySlug !== this.$route.params.entitySlug) {
+        this.selected.length = 0;
+        this.currentEntitySlug = this.$route.params.entitySlug;
+      }
+
       const preselectedIds = this.selected.map(x => x.id);
       let toQuery = this.modelValue;
       if (!Array.isArray(this.modelValue)) {

frontend/src/components/layout/ModalDialog.vue

@@ -68,11 +68,6 @@ export default {
       default: ""
     }
   },
-  deactivated() {
-    Array.from(document.querySelectorAll('.modal-backdrop')).forEach(function (el) {
-      el.classList.remove('modal-backdrop');
-    });
-  },
   computed: {
     uniqueId() {
       return this.modalId || `modal-${randomUUID()}`;