fix: tab switching side effect

packages/hoppscotch-app/components/collections/ChooseType.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="show">
-    <SmartTabs :id="'collections_tab'" v-model="collectionTab">
+    <SmartTabs :id="'collections_tab'" v-model="selectedCollectionTab">
       <SmartTab
         :id="'my-collections'"
         :label="`${$t('collection.my_collections')}`"
@@ -75,7 +75,7 @@ type TeamData = GetMyTeamsQuery["myTeams"][number]
 
 type CollectionTabs = "my-collections" | "team-collections"
 
-const collectionTab = ref<CollectionTabs>("my-collections")
+const selectedCollectionTab = ref<CollectionTabs>("my-collections")
 
 defineProps<{
   doc: boolean
@@ -116,7 +116,7 @@ const updateSelectedTeam = (team: TeamData | undefined) => {
 }
 
 watch(
-  () => collectionTab.value,
+  () => selectedCollectionTab.value,
   (newValue: string) => {
     updateCollectionsType(newValue)
   }

packages/hoppscotch-app/components/graphql/Sidebar.vue

@@ -11,7 +11,6 @@
         @useHistory="handleUseHistory"
       />
     </SmartTab>
-
     <SmartTab
       :id="'collections'"
       icon="folder"
@@ -19,7 +18,6 @@
     >
       <CollectionsGraphql />
     </SmartTab>
-
     <SmartTab
       :id="'docs'"
       icon="book-open"
@@ -64,11 +62,9 @@
           </div>
         </div>
         <SmartTabs
-          ref="gqlTabs"
           v-model="selectedGqlTab"
           styles="border-t border-b border-dividerLight bg-primary sticky z-10 top-sidebarPrimaryStickyFold"
         >
-          <div class="gqlTabs">
           <SmartTab
             v-if="queryFields.length > 0"
             :id="'queries'"
@@ -114,7 +110,6 @@
           <SmartTab
             v-if="graphqlTypes.length > 0"
             :id="'types'"
-              ref="typesTab"
             :label="`${t('tab.types')}`"
             class="divide-y divide-dividerLight"
           >
@@ -128,11 +123,9 @@
               :jump-type-callback="handleJumpToType"
             />
           </SmartTab>
-          </div>
         </SmartTabs>
       </div>
     </SmartTab>
-
     <SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`">
       <div
         v-if="schemaString"
@@ -318,9 +311,6 @@ const copySchemaIcon = ref("copy")
 
 const graphqlFieldsFilterText = ref("")
 
-const gqlTabs = ref<any | null>(null)
-const typesTab = ref<any | null>(null)
-
 const filteredQueryFields = computed(() => {
   return getFilteredGraphqlFields(
     graphqlFieldsFilterText.value,
@@ -370,7 +360,7 @@ const getGqlTypeHighlightedFields = (gqlType: GraphQLType) => {
 }
 
 const handleJumpToType = async (type: GraphQLType) => {
-  gqlTabs.value.selectTab(typesTab.value)
+  selectedGqlTab.value = "types"
   await nextTick()
 
   const rootTypeName = resolveRootType(type).name