fix: misc component issues

app/src/App.vue

@@ -142,7 +142,7 @@ export default {
       if (key === copypastaCode[copypastastep++]) {
         if (copypastastep === copypastaCode.length) {
           document
-            .getElementsByClassName('unselectable')
+            .querySelectorAll('.unselectable')
             .forEach((element) => element.classList.remove('unselectable'))
           copypastastep = 0
         }

app/src/components/globals/formItems/TagsSelectizeItem.vue

@@ -175,7 +175,7 @@ export default {
       // Allow to start searching after dropdown opening
       if (
         !['Tab', 'Space'].includes(e.code) &&
-        e.target === this.$refs.dropdown.$el.lastElementChild
+        e.target === this.$refs.dropdown.$el.firstElementChild
       ) {
         this.$refs['search-input'].focus()
       }

app/src/store/data.js

@@ -1,6 +1,7 @@
 import api from '@/api'
 import { isEmptyValue } from '@/helpers/commons'
 import { stratify } from '@/helpers/data/tree'
+import { reactive } from 'vue'
 
 export function getParentDomain(domain, domains, highest = false) {
   const method = highest ? 'lastIndexOf' : 'indexOf'
@@ -277,14 +278,16 @@ export default {
       // action when state.domain change)
       const domains = getters.orderedDomains
       if (!domains) return
-      const dataset = domains.map((name) => ({
-        // data to build a hierarchy
-        name,
-        parent: getParentDomain(name, domains),
-        // utility data that will be used by `RecursiveListGroup` component
-        to: { name: 'domain-info', params: { name } },
-        opened: true,
-      }))
+      const dataset = reactive(
+        domains.map((name) => ({
+          // data to build a hierarchy
+          name,
+          parent: getParentDomain(name, domains),
+          // utility data that will be used by `RecursiveListGroup` component
+          to: { name: 'domain-info', params: { name } },
+          opened: true,
+        })),
+      )
       return stratify(dataset)
     },
 

app/src/views/app/AppCatalog.vue

@@ -80,7 +80,10 @@
         class="category-card"
       >
         <BCardTitle>
-          <BLink @click="updateQuery('category', cat.value)" class="card-link">
+          <BLink
+            @click.prevent="updateQuery('category', cat.value)"
+            class="card-link"
+          >
             <YIcon :iname="cat.icon" /> {{ cat.text }}
           </BLink>
         </BCardTitle>

app/src/views/domain/DomainList.vue

@@ -6,7 +6,6 @@
     items-name="domains"
     :queries="queries"
     :filtered-items="hasFilteredItems"
-    @queries-response="onQueriesResponse"
   >
     <template #top-bar-buttons>
       <BButton variant="success" :to="{ name: 'domain-add' }">
@@ -63,12 +62,11 @@ export default {
     return {
       queries: [['GET', { uri: 'domains', storeKey: 'domains' }]],
       search: '',
-      domainsTree: undefined,
     }
   },
 
   computed: {
-    ...mapGetters(['domains', 'mainDomain']),
+    ...mapGetters(['domains', 'mainDomain', 'domainsTree']),
 
     tree() {
       if (!this.domainsTree) return
@@ -86,12 +84,5 @@ export default {
       return this.tree.children || null
     },
   },
-
-  methods: {
-    onQueriesResponse() {
-      // Add the tree to `data` to make it reactive
-      this.domainsTree = this.$store.getters.domainsTree
-    },
-  },
 }
 </script>