Fix bug with selected VM

pvc-vue/src/components/general/VMSearchBar.vue

@@ -99,10 +99,10 @@
           :key="vm.name"
           :data-vm-name="vm.name"
           class="vm-list-item"
-          :class="{ 'active': selectedVM === vm.name || vmFromUrl === vm.name }"
+          :class="{ 'active': isVMSelected(vm.name) }"
           @click="handleVMSelect(vm)"
         >
-          <div v-if="selectedVM === vm.name || vmFromUrl === vm.name" class="active-indicator"></div>
+          <div v-if="isVMSelected(vm.name)" class="active-indicator"></div>
           <div class="vm-item-content">
             <div class="vm-name">{{ vm.name }}</div>
             <div class="vm-state" :class="getStateClass(vm.state)">
@@ -190,6 +190,13 @@ const shouldShowClearButton = computed(() => {
          (!props.showList && (props.selectedVM || localStorage.getItem('selectedVMId')));
 });
 
+// Add a computed property to check if a VM is selected
+const isVMSelected = (vmName) => {
+  return props.selectedVM === vmName || 
+         props.vmFromUrl === vmName || 
+         localStorage.getItem('selectedVMId') === vmName;
+};
+
 // Initialize the component
 onMounted(() => {
   // Set up click outside handler
@@ -229,8 +236,10 @@ onMounted(() => {
   }
   
   // If the list is visible on mount, scroll to selected VM
-  if (props.showList && (props.selectedVM || props.vmFromUrl || savedVMId)) {
-    scrollToSelectedVM();
+  if (props.showList) {
+    nextTick(() => {
+      scrollToSelectedVM();
+    });
   }
 });
 
@@ -636,10 +645,12 @@ watch([() => props.selectedVM, () => props.vmFromUrl], ([selectedVM, vmFromUrl])
 // Add a function to scroll to the selected VM
 const scrollToSelectedVM = () => {
   nextTick(() => {
+    // Find the first selected VM
     const selectedVMName = props.selectedVM || props.vmFromUrl || localStorage.getItem('selectedVMId');
     if (selectedVMName && vmListContainer.value) {
       const activeElement = vmListContainer.value.querySelector(`[data-vm-name="${selectedVMName}"]`);
       if (activeElement) {
+        // Scroll the element into view
         activeElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
       }
     }