People: Ignore route change event when tab is inactive #22

frontend/src/pages/people.vue

@@ -18,7 +18,7 @@
 
       <v-tabs-items touchless>
         <v-tab-item v-for="(item, index) in tabs" :key="index" lazy>
-          <component :is="item.component" :static-filter="item.filter"></component>
+          <component :is="item.component" :static-filter="item.filter" :active="active === index"></component>
         </v-tab-item>
       </v-tabs-items>
     </v-tabs>

frontend/src/pages/people/faces.vue

@@ -142,7 +142,8 @@ import {ClickLong, ClickShort, Input, InputInvalid} from "common/input";
 export default {
   name: 'PPageFaces',
   props: {
-    staticFilter: Object
+    staticFilter: Object,
+    active: Boolean,
   },
   data() {
     const query = this.$route.query;
@@ -186,6 +187,12 @@ export default {
   },
   watch: {
     '$route'() {
+      // Tab inactive?
+      if (!this.active) {
+        // Ignore event.
+        return;
+      }
+
       const query = this.$route.query;
 
       this.filter.q = query["q"] ? query["q"] : "";

frontend/src/pages/people/subjects.vue

@@ -159,7 +159,8 @@ import {ClickLong, ClickShort, Input, InputInvalid} from "common/input";
 export default {
   name: 'PPageSubjects',
   props: {
-    staticFilter: Object
+    staticFilter: Object,
+    active: Boolean,
   },
   data() {
     const query = this.$route.query;
@@ -194,6 +195,12 @@ export default {
   },
   watch: {
     '$route'() {
+      // Tab inactive?
+      if (!this.active) {
+        // Ignore event.
+        return;
+      }
+
       const query = this.$route.query;
 
       this.filter.q = query["q"] ? query["q"] : "";