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' }); } }