stop event propagation on close text button

src/components/text/TextCard.vue

@@ -5,7 +5,7 @@
         <template v-if="children">
           <b-nav-item
             v-for="child in text.children" :key="child.id"
-            @click="$emit('open', text.id, child.id)"
+            @click="onChildOpen($event, text.id, child.id)"
             :active="children.includes(child.id)"
           >
             {{ child.id }}
@@ -13,7 +13,7 @@
         </template>
 
         <b-nav-item>
-          <b-button-close @click="$emit('close', text.id)" />
+          <b-button-close @click="onSelfClose($event, text.id)" />
         </b-nav-item>
       </b-nav>
     </template>
@@ -54,6 +54,18 @@ export default {
 
   props: {
     children: { type: Array, default: null }
+  },
+
+  methods: {
+    onChildOpen (_, id, childId) {
+      this.$emit('open', id, childId)
+    },
+
+    onSelfClose (e, id) {
+      // stop the click event propagation to avoid other listeners to interact with a soon to be deleted element.
+      e.stopPropagation()
+      this.$emit('close', id)
+    }
   }
 }
 </script>