Fix search filtering bug
This commit is contained in:
		@@ -180,6 +180,9 @@ const inputValue = ref('');
 | 
				
			|||||||
// Add a ref to the VM list container
 | 
					// Add a ref to the VM list container
 | 
				
			||||||
const vmListContainer = ref(null);
 | 
					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 both showList and selectedVM to update input value
 | 
				
			||||||
watch([() => props.showList, () => props.selectedVM, () => props.vmFromUrl, () => props.modelValue], 
 | 
					watch([() => props.showList, () => props.selectedVM, () => props.vmFromUrl, () => props.modelValue], 
 | 
				
			||||||
  ([showList, selectedVM, vmFromUrl, modelValue]) => {
 | 
					  ([showList, selectedVM, vmFromUrl, modelValue]) => {
 | 
				
			||||||
@@ -206,6 +209,10 @@ watch([() => props.showList, () => props.selectedVM, () => props.vmFromUrl, () =
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
// Watch modelValue to update input when searching
 | 
					// Watch modelValue to update input when searching
 | 
				
			||||||
watch(() => props.modelValue, (newVal) => {
 | 
					watch(() => props.modelValue, (newVal) => {
 | 
				
			||||||
 | 
					  if (newVal) {
 | 
				
			||||||
 | 
					    lastSearchQuery.value = newVal;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  
 | 
				
			||||||
  if (props.showList) {
 | 
					  if (props.showList) {
 | 
				
			||||||
    inputValue.value = newVal || '';
 | 
					    inputValue.value = newVal || '';
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
@@ -328,6 +335,7 @@ const filteredVMs = computed(() => {
 | 
				
			|||||||
const handleSearch = (event) => {
 | 
					const handleSearch = (event) => {
 | 
				
			||||||
  // Always update the model value to preserve search
 | 
					  // Always update the model value to preserve search
 | 
				
			||||||
  searchActive.value = true;
 | 
					  searchActive.value = true;
 | 
				
			||||||
 | 
					  lastSearchQuery.value = event.target.value;
 | 
				
			||||||
  emit('update:modelValue', event.target.value);
 | 
					  emit('update:modelValue', event.target.value);
 | 
				
			||||||
  emit('search', event.target.value);
 | 
					  emit('search', event.target.value);
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
@@ -352,13 +360,26 @@ const clearSearch = () => {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
const toggleList = () => {
 | 
					const toggleList = () => {
 | 
				
			||||||
  console.log('toggleList called, showList:', props.showList);
 | 
					  console.log('toggleList called, showList:', props.showList);
 | 
				
			||||||
  // If we're opening the list
 | 
					  
 | 
				
			||||||
 | 
					  // If we're opening the list (currently closed)
 | 
				
			||||||
  if (!props.showList) {
 | 
					  if (!props.showList) {
 | 
				
			||||||
    // Restore previous search if any
 | 
					    // When opening the list, restore the last search query
 | 
				
			||||||
    if (props.modelValue) {
 | 
					    nextTick(() => {
 | 
				
			||||||
 | 
					      if (lastSearchQuery.value) {
 | 
				
			||||||
 | 
					        inputValue.value = lastSearchQuery.value;
 | 
				
			||||||
        searchActive.value = true;
 | 
					        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) {
 | 
				
			||||||
 | 
					      lastSearchQuery.value = props.modelValue;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    // Don't emit update:modelValue here to preserve the search
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  
 | 
				
			||||||
  emit('toggle-list');
 | 
					  emit('toggle-list');
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -432,10 +453,25 @@ const scrollToSelectedVM = () => {
 | 
				
			|||||||
  });
 | 
					  });
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
// Call scrollToSelectedVM when the list becomes visible
 | 
					// Update the watch for showList to handle search state
 | 
				
			||||||
watch(() => props.showList, (isVisible) => {
 | 
					watch(() => props.showList, (isOpen) => {
 | 
				
			||||||
  if (isVisible) {
 | 
					  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();
 | 
					    scrollToSelectedVM();
 | 
				
			||||||
 | 
					  } else {
 | 
				
			||||||
 | 
					    // When list closes, show the selected VM but preserve search
 | 
				
			||||||
 | 
					    const effectiveVM = props.selectedVM || props.vmFromUrl;
 | 
				
			||||||
 | 
					    if (effectiveVM) {
 | 
				
			||||||
 | 
					      inputValue.value = effectiveVM;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user