From 4b708f1f40e1307746635352d4fad3a4a9023dbf Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sun, 2 Mar 2025 19:12:42 -0500
Subject: [PATCH] Fix search opening bug

---
 .../src/components/general/VMSearchBar.vue    | 81 ++++++++++++-------
 1 file changed, 54 insertions(+), 27 deletions(-)

diff --git a/pvc-vue/src/components/general/VMSearchBar.vue b/pvc-vue/src/components/general/VMSearchBar.vue
index 95082a6..6a2736a 100644
--- a/pvc-vue/src/components/general/VMSearchBar.vue
+++ b/pvc-vue/src/components/general/VMSearchBar.vue
@@ -15,7 +15,15 @@
       
       <!-- Search box - visible when drawer is open -->
       <div v-if="showList" class="search-box">
-        <i class="fas fa-search search-icon"></i>
+        <button 
+          v-if="shouldShowClearButton"
+          class="btn-clear btn-clear-left" 
+          @click.stop="handleClearButton"
+          title="Clear search"
+        >
+          <i class="fas fa-times"></i>
+        </button>
+        
         <input 
           type="text" 
           placeholder="Search VMs..." 
@@ -27,18 +35,12 @@
           :class="{ 'search-active': showList && isFilterActive }"
           class="form-control search-input"
         >
-        <button 
-          v-if="shouldShowClearButton"
-          class="btn-clear" 
-          @click.stop="handleClearButton"
-          :title="showList ? 'Clear search' : 'Clear selected VM'"
-        >
-          <i class="fas fa-times"></i>
-        </button>
+        
+        <i class="fas fa-search search-icon-right"></i>
       </div>
       
       <!-- VM Display - visible when drawer is closed -->
-      <div v-else class="vm-display" @click="openSearchDrawer">
+      <div v-else class="vm-display" @click.stop="openSearchDrawer">
         <button 
           v-if="selectedVMName"
           class="vm-clear-btn" 
@@ -328,6 +330,13 @@ const handleSearchClick = () => {
   // When clicking the search input, activate filtering mode
   if (props.showList && !isFilterActive.value) {
     isFilterActive.value = true;
+    
+    // Restore saved search text if available
+    const savedSearchText = localStorage.getItem('vmSearchText');
+    if (savedSearchText && inputValue.value !== savedSearchText) {
+      inputValue.value = savedSearchText;
+      emit('update:modelValue', savedSearchText);
+    }
   }
 };
 
@@ -705,7 +714,12 @@ const loadFiltersFromLocalStorage = () => {
 };
 
 // Method to open the search drawer
-const openSearchDrawer = () => {
+const openSearchDrawer = (event) => {
+  // Prevent event propagation
+  event.stopPropagation();
+  
+  console.log('Opening search drawer');
+  
   // Only open if it's not already open
   if (!props.showList) {
     // Set filter active to true to indicate we're in search mode
@@ -719,6 +733,17 @@ const openSearchDrawer = () => {
       const searchInput = document.querySelector('.search-input');
       if (searchInput) {
         searchInput.focus();
+        
+        // Restore saved search text if available
+        const savedSearchText = localStorage.getItem('vmSearchText');
+        if (savedSearchText) {
+          inputValue.value = savedSearchText;
+          emit('update:modelValue', savedSearchText);
+        } else {
+          // If no saved search, clear the input
+          inputValue.value = '';
+          emit('update:modelValue', '');
+        }
       }
     });
   }
@@ -749,22 +774,14 @@ const openSearchDrawer = () => {
   min-width: 200px;
 }
 
-.search-icon {
-  position: absolute;
-  left: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #6c757d;
-}
-
 .search-input {
   padding-left: 30px;
   padding-right: 30px;
 }
 
-.btn-clear {
+.btn-clear-left {
   position: absolute;
-  right: 10px;
+  left: 10px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
@@ -774,11 +791,11 @@ const openSearchDrawer = () => {
   padding: 0;
   font-size: 0.875rem;
   transition: color 0.2s;
-  z-index: 5; /* Ensure it's above other elements */
+  z-index: 5;
 }
 
-.btn-clear:hover {
-  color: #dc3545; /* Red color on hover */
+.btn-clear-left:hover {
+  color: #dc3545;
 }
 
 .list-toggle-btn {
@@ -1044,7 +1061,7 @@ const openSearchDrawer = () => {
   min-width: 200px;
   height: 38px;
   padding: 0.375rem 0.75rem;
-  padding-left: 40px;
+  padding-left: 30px;
   padding-right: 30px;
   background-color: #f8f9fa;
   border: 1px solid #ced4da;
@@ -1053,15 +1070,25 @@ const openSearchDrawer = () => {
   align-items: center;
   cursor: pointer;
   transition: background-color 0.2s;
+  user-select: none; /* Prevent text selection */
+  z-index: 1; /* Ensure it's clickable */
 }
 
+/* Add a hover effect to make it clear it's clickable */
 .vm-display:hover {
   background-color: #e9ecef;
+  border-color: #adb5bd;
+}
+
+/* Add an active state for when it's clicked */
+.vm-display:active {
+  background-color: #dee2e6;
+  border-color: #adb5bd;
 }
 
 .vm-clear-btn {
   position: absolute;
-  left: 8px;
+  left: 6px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
@@ -1080,7 +1107,7 @@ const openSearchDrawer = () => {
 
 .vm-icon {
   color: #6c757d;
-  margin-right: 0.5rem;
+  margin-right: 0.25rem;
 }
 
 .vm-name {