diff --git a/pvc-vue/src/components/general/VMSearchBar.vue b/pvc-vue/src/components/general/VMSearchBar.vue index 32905da..b5a07ad 100644 --- a/pvc-vue/src/components/general/VMSearchBar.vue +++ b/pvc-vue/src/components/general/VMSearchBar.vue @@ -180,6 +180,9 @@ const inputValue = ref(''); // Add a ref to the VM list container const vmListContainer = ref(null); +// Add a ref to store the last search query +const lastSearchQuery = ref(''); + // Watch both showList and selectedVM to update input value watch([() => props.showList, () => props.selectedVM, () => props.vmFromUrl, () => props.modelValue], ([showList, selectedVM, vmFromUrl, modelValue]) => { @@ -206,6 +209,10 @@ watch([() => props.showList, () => props.selectedVM, () => props.vmFromUrl, () = // Watch modelValue to update input when searching watch(() => props.modelValue, (newVal) => { + if (newVal) { + lastSearchQuery.value = newVal; + } + if (props.showList) { inputValue.value = newVal || ''; } @@ -328,6 +335,7 @@ const filteredVMs = computed(() => { const handleSearch = (event) => { // Always update the model value to preserve search searchActive.value = true; + lastSearchQuery.value = event.target.value; emit('update:modelValue', event.target.value); emit('search', event.target.value); }; @@ -352,13 +360,26 @@ const clearSearch = () => { const toggleList = () => { console.log('toggleList called, showList:', props.showList); - // If we're opening the list + + // If we're opening the list (currently closed) if (!props.showList) { - // Restore previous search if any + // When opening the list, restore the last search query + nextTick(() => { + if (lastSearchQuery.value) { + inputValue.value = lastSearchQuery.value; + searchActive.value = true; + } + }); + } + // If we're closing the list (currently open) + else { + // When closing, save the current search but don't clear it if (props.modelValue) { - searchActive.value = true; + lastSearchQuery.value = props.modelValue; } + // Don't emit update:modelValue here to preserve the search } + emit('toggle-list'); }; @@ -432,10 +453,25 @@ const scrollToSelectedVM = () => { }); }; -// Call scrollToSelectedVM when the list becomes visible -watch(() => props.showList, (isVisible) => { - if (isVisible) { +// Update the watch for showList to handle search state +watch(() => props.showList, (isOpen) => { + if (isOpen) { + // When list opens, restore the last search query + nextTick(() => { + if (lastSearchQuery.value) { + inputValue.value = lastSearchQuery.value; + searchActive.value = true; + } + }); + + // Also scroll to selected VM scrollToSelectedVM(); + } else { + // When list closes, show the selected VM but preserve search + const effectiveVM = props.selectedVM || props.vmFromUrl; + if (effectiveVM) { + inputValue.value = effectiveVM; + } } });