diff --git a/pvc-vue/src/components/general/VMSearchBar.vue b/pvc-vue/src/components/general/VMSearchBar.vue
index b4ab3e1..690c031 100644
--- a/pvc-vue/src/components/general/VMSearchBar.vue
+++ b/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)"
>
-
{{ vm.name }}
@@ -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' });
}
}