diff --git a/pvc-vue/src/components/general/VMSearchBar.vue b/pvc-vue/src/components/general/VMSearchBar.vue index fd23a27..505ce56 100644 --- a/pvc-vue/src/components/general/VMSearchBar.vue +++ b/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 - // This is handled in handleFocus and toggleList + // Scroll to selected VM when list opens + 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' }); + } + } + }); +};