Collapse inner items when parent item was closed

src/views/emojiPacks/components/LocalEmojiPack.vue

@@ -188,6 +188,9 @@ export default {
     }
   },
   methods: {
+    collapse() {
+      this.showPackContent = []
+    },
     deletePack() {
       this.$confirm('This will delete the pack, are you sure?', 'Warning', {
         confirmButtonText: 'Yes, delete the pack',

src/views/emojiPacks/index.vue

@@ -33,7 +33,7 @@
           </el-form-item>
           <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('emoji.packs')">
             <el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack" accordion @change="setActiveTab">
-              <local-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
+              <local-emoji-pack ref="localEmojiPack" :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
             </el-collapse>
           </el-form-item>
         </el-form>
@@ -185,6 +185,7 @@ export default {
       })
     },
     setActiveTab(activeTab) {
+      this.$refs.localEmojiPack.forEach(el => el.collapse())
       this.$store.dispatch('SetActiveTab', activeTab)
     }
   }