Fixed incorrect tab switching on closing

Frontend/src/components/xml/TabComponent.vue

@@ -25,8 +25,8 @@ function remove() {
 </script>
 
 <template>
-    <div @click="activate" :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3 cursor-pointer">
-        <button class="hover:brightness-110"><slot /></button>
+    <div :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3">
+        <button @click="activate" class="hover:brightness-110"><slot /></button>
         <button @click="remove" class="hover:brightness-110 hover:bg-blue-100 hover:dark:bg-slate-400 hover:dark:text-black px-2 rounded-full">x</button>
     </div>
 </template>

Frontend/src/components/xml/XmlTabbedInputComponent.vue

@@ -21,7 +21,7 @@ const activeTabId = ref(0);
 const tabs = ref(new Array<TabData>);
 tabs.value.push({
     id: newTabId.value++,
-    name: "XML1",
+    name: "xml1.xml",
     data: "",
 })
 
@@ -86,7 +86,7 @@ function addTab() {
 
     tabs.value.push({
         id: newTabId.value++,
-        name: "XML" + newTabId.value,
+        name: "xml" + newTabId.value + ".xml",
         data: ""
     });
 }
@@ -101,7 +101,7 @@ function removeTab(id : number) {
 
     let indexToRemove = findIndexWithID(id);
 
-    switchToExistingTab(indexToRemove)
+    switchToExistingTab(indexToRemove);
     
     tabs.value.splice(indexToRemove, 1);