fix(ui): tabs unregistering and keys

Author: macarie

packages/ui/client/components/artifacts/visual-regression/SmallTabs.vue

@@ -6,10 +6,6 @@ import { idFor, SMALL_TABS_CONTEXT } from '~/composables/small-tabs'
 const activeTab = ref<string | null>(null)
 const tabs = ref<SmallTabsConfig[]>([])
 
-function setActive(key: string) {
-  activeTab.value = key
-}
-
 const id = useId()
 
 provide(SMALL_TABS_CONTEXT, {
@@ -21,7 +17,7 @@ provide(SMALL_TABS_CONTEXT, {
     }
 
     if (tabs.value.length === 1) {
-      setActive(tab.id)
+      activeTab.value = tab.id
     }
   },
   unregisterTab: (tab) => {
@@ -30,6 +26,10 @@ provide(SMALL_TABS_CONTEXT, {
     if (index > -1) {
       tabs.value.splice(index, 1)
     }
+
+    if (activeTab.value === tab.id) {
+      activeTab.value = tabs.value[0]?.id ?? null
+    }
   },
 })
 </script>
@@ -52,7 +52,7 @@ provide(SMALL_TABS_CONTEXT, {
         :aria-controls="idFor.tabpanel(tab.id, id)"
         type="button"
         class="aria-[selected=true]:underline underline-offset-4"
-        @click="setActive(tab.id)"
+        @click="activeTab = tab.id"
       >
         {{ tab.title }}
       </button>

packages/ui/client/components/artifacts/visual-regression/VisualRegression.vue

@@ -29,16 +29,32 @@ const groups = computed(() => ({
       {{ regression.message }}
     </template>
     <SmallTabs>
-      <SmallTabsPane v-if="groups.diff" title="Diff">
+      <SmallTabsPane
+        v-if="groups.diff"
+        :key="groups.diff.path"
+        title="Diff"
+      >
         <VisualRegressionImage :attachment="groups.diff" />
       </SmallTabsPane>
-      <SmallTabsPane v-if="groups.reference" title="Reference">
+      <SmallTabsPane
+        v-if="groups.reference"
+        :key="groups.reference.path"
+        title="Reference"
+      >
         <VisualRegressionImage :attachment="groups.reference" />
       </SmallTabsPane>
-      <SmallTabsPane v-if="groups.actual" title="Actual">
+      <SmallTabsPane
+        v-if="groups.actual"
+        :key="groups.actual.path"
+        title="Actual"
+      >
         <VisualRegressionImage :attachment="groups.actual" />
       </SmallTabsPane>
-      <SmallTabsPane v-if="groups.reference && groups.actual" title="Slider">
+      <SmallTabsPane
+        v-if="groups.reference && groups.actual"
+        :key="(groups.reference.path ?? '') + (groups.actual.path ?? '')"
+        title="Slider"
+      >
         <VisualRegressionSlider :actual="groups.actual" :reference="groups.reference" />
       </SmallTabsPane>
     </SmallTabs>