Fix search bar behaviour (step 2)

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

@@ -182,6 +182,11 @@ onMounted(() => {
     inputValue.value = props.modelValue;
     searchText.value = props.modelValue;
   }
+  
+  // If the list is visible on mount, scroll to selected VM
+  if (props.showList && (props.selectedVM || props.vmFromUrl)) {
+    scrollToSelectedVM();
+  }
 });
 
 onUnmounted(() => {
@@ -253,6 +258,11 @@ const toggleList = () => {
       inputValue.value = searchText.value;
       emit('update:modelValue', searchText.value);
     }
+    
+    // Schedule scrolling to selected VM after the list opens
+    nextTick(() => {
+      scrollToSelectedVM();
+    });
   }
   
   emit('toggle-list');
@@ -275,12 +285,20 @@ const handleVMSelect = (vm) => {
 
 // Handle click outside
 const handleClickOutside = (event) => {
+  // Handle filter menu clicks
   if (showFilterMenu.value && 
       filterMenu.value && 
       !filterMenu.value.contains(event.target) && 
       !filterDropdown.value.contains(event.target)) {
     showFilterMenu.value = false;
   }
+  
+  // Handle closing the VM list when clicking outside
+  if (props.showList && 
+      controlsBar.value && 
+      !controlsBar.value.contains(event.target)) {
+    emit('toggle-list');
+  }
 };
 
 // Toggle filter menu
@@ -405,12 +423,16 @@ watch(() => props.showList, (isVisible) => {
     // When list is opened, show search text if available
     if (searchText.value) {
       inputValue.value = searchText.value;
+      // Ensure the model value is updated to match the search text
+      if (props.modelValue !== searchText.value) {
+        emit('update:modelValue', searchText.value);
+      }
     } else {
       inputValue.value = '';
     }
     
-    // Only activate filtering if opened via search input, not List VMs button
+    // Scroll to selected VM when list opens
-    // This is handled in handleFocus and toggleList
+    scrollToSelectedVM();
   }
 });
 
@@ -423,6 +445,19 @@ watch([() => props.selectedVM, () => props.vmFromUrl], ([selectedVM, vmFromUrl])
     }
   }
 });
+
+// Add a function to scroll to the selected VM
+const scrollToSelectedVM = () => {
+  nextTick(() => {
+    const selectedVMName = props.selectedVM || props.vmFromUrl;
+    if (selectedVMName && vmListContainer.value) {
+      const activeElement = vmListContainer.value.querySelector(`[data-vm-name="${selectedVMName}"]`);
+      if (activeElement) {
+        activeElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
+      }
+    }
+  });
+};
 </script>
 
 <style scoped>