Fix search filtering bug
This commit is contained in:
		@@ -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
 | 
			
		||||
    if (props.modelValue) {
 | 
			
		||||
    // 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) {
 | 
			
		||||
      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;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user