Fix active tab and remove unwanted watch

threefoldtech · Oct 15, 2024 · a83a58a · a83a58a
1 parent 038404b
commit a83a58a
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
@@ -82,6 +82,7 @@
         :tabs="getTabs()"
         v-model="activeTab"
         :disabled="creatingAccount || activatingAccount || activating"
+        ref="tabsRef"
         @tab:change="
           () => {
             clearError();
@@ -524,6 +525,18 @@ watch(
   },
   { deep: false },
 );
+const tabsRef = ref();
+
+function handleTabs() {
+  const tabs = tabsRef.value?.$el;
+  if (!tabs) return;
+
+  const activeClass = "v-slide-group-item--active";
+  const tabsButtons = tabs.nextSibling.querySelectorAll("button");
+  const ButtonsList: HTMLElement[] = Array.from(tabsButtons);
+  const activeButtonIndex = ButtonsList.findIndex(sibling => sibling.classList.contains(activeClass));
+  activeTab.value = activeButtonIndex;
+}
 
 async function mounted() {
   selectedName.value = items.value.filter(item => item.id === selectedItem.value.id)[0].name;
@@ -562,6 +575,7 @@ function isStoredCredentials() {
 }
 
 function getTabs() {
+  handleTabs();
   let tabs = [];
   if (isStoredCredentials()) {
     tabs = [
@@ -630,10 +644,6 @@ watch(
   },
   { immediate: true },
 );
-watch(
-  () => [online, props.modelValue],
-  ([newOnline, newModelValue], [oldOnline, oldModelValue]) => {},
-);
 
 function logout() {
   sessionStorage.removeItem("password");