Fix Inspector tabs remounting on change

src/ui/inspector/Inspector.vue

@@ -23,8 +23,8 @@
 <template>
   <div class="c-inspector js-inspector">
     <object-name />
-    <InspectorTabs :selection="selection" :is-editing="isEditing" @select-tab="selectTab" />
-    <InspectorViews :selection="selection" :selected-tab="selectedTab" />
+    <InspectorTabs :is-editing="isEditing" @select-tab="selectTab" />
+    <InspectorViews :selected-tab="selectedTab" />
   </div>
 </template>
 
@@ -48,20 +48,10 @@ export default {
   },
   data() {
     return {
-      selection: this.openmct.selection.get(),
       selectedTab: undefined
     };
   },
-  mounted() {
-    this.openmct.selection.on('change', this.setSelection);
-  },
-  unmounted() {
-    this.openmct.selection.off('change', this.setSelection);
-  },
   methods: {
-    setSelection(selection) {
-      this.selection = selection;
-    },
     selectTab(tab) {
       this.selectedTab = tab;
     }

src/ui/inspector/InspectorTabs.vue

@@ -40,21 +40,11 @@
 export default {
   inject: ['openmct'],
   props: {
-    selection: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
     isEditing: {
       type: Boolean,
       required: true
     }
   },
-  selection: {
-    type: Array,
-    default: []
-  },
   data() {
     return {
       tabs: [],
@@ -69,12 +59,6 @@ export default {
     }
   },
   watch: {
-    selection: {
-      handler() {
-        this.updateSelection();
-      },
-      deep: true
-    },
     visibleTabs: {
       handler() {
         this.selectDefaultTabIfSelectedNotVisible();
@@ -82,9 +66,16 @@ export default {
       deep: true
     }
   },
+  mounted() {
+    this.updateSelection();
+    this.openmct.selection.on('change', this.updateSelection);
+  },
+  unmounted() {
+    this.openmct.selection.off('change', this.updateSelection);
+  },
   methods: {
     updateSelection() {
-      const inspectorViews = this.openmct.inspectorViews.get(this.selection);
+      const inspectorViews = this.openmct.inspectorViews.get(this.openmct.selection.get());
 
       this.tabs = inspectorViews.map((view) => {
         return {

src/ui/inspector/InspectorViews.vue

@@ -31,29 +31,24 @@ export default {
     selectedTab: {
       type: Object,
       default: undefined
-    },
-    selection: {
-      type: Array,
-      default: () => {
-        return [];
-      }
     }
   },
   watch: {
-    selection: {
-      handler() {
-        this.updateSelectionViews();
-      },
-      deep: true
-    },
     selectedTab() {
       this.clearAndShowViewsForTab();
     }
   },
+  mounted() {
+    this.updateSelectionViews();
+    this.openmct.selection.on('change', this.updateSelectionViews);
+  },
+  unmounted() {
+    this.openmct.selection.off('change', this.updateSelectionViews);
+  },
   methods: {
     updateSelectionViews(selection) {
       this.clearViews();
-      this.selectedViews = this.openmct.inspectorViews.get(this.selection);
+      this.selectedViews = this.openmct.inspectorViews.get(this.openmct.selection.get());
       this.showViewsForTab();
     },
     clearViews() {