From 1a080cd0057dfc6180f97b8e98b315f06537212a Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Mon, 13 Jan 2025 11:03:31 +0530
Subject: [PATCH 1/2] Fixed: UI of the match product modal on different
 scenarios (#528)

---
 src/components/MatchProductModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MatchProductModal.vue b/src/components/MatchProductModal.vue
index 75d59ea3..e410bbfe 100644
--- a/src/components/MatchProductModal.vue
+++ b/src/components/MatchProductModal.vue
@@ -17,7 +17,7 @@
       <ion-label>{{ translate("Searching for", { queryString }) }}</ion-label>
     </div>
 
-    <template v-else-if="products.length">
+    <template v-else-if="isSearching && products.length">
       <ion-radio-group v-model="selectedProductId">
         <ion-item v-for="product in products" :key="product.productId">
           <ion-thumbnail slot="start">
@@ -41,7 +41,7 @@
       </ion-radio-group>
     </template>
 
-    <div v-else-if="queryString && isSearching && !products.length" class="empty-state">
+    <div v-else-if="prevSearchedQuery && isSearching && !products.length" class="empty-state">
       <p>{{ translate("No results found for", { queryString: prevSearchedQuery }) }}</p>
     </div>
     <div v-else class="empty-state">

From ef31c048d495830c19bdf5b9ee3aca755321fcea Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Mon, 13 Jan 2025 18:59:13 +0530
Subject: [PATCH 2/2] Improved: logic for managing previous queryState (#528)

---
 src/components/MatchProductModal.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/MatchProductModal.vue b/src/components/MatchProductModal.vue
index e410bbfe..c35746c9 100644
--- a/src/components/MatchProductModal.vue
+++ b/src/components/MatchProductModal.vue
@@ -10,7 +10,7 @@
     </ion-toolbar>
   </ion-header>
   <ion-content>
-    <ion-searchbar v-model="queryString" :placeholder="translate('Search product')" @keyup.enter="handleSearch" />
+    <ion-searchbar :value="queryString" :placeholder="translate('Search product')" @keyup.enter="queryString = $event.target.value; handleSearch()" />
 
     <div v-if="isLoading" class="empty-state">
       <ion-spinner name="crescent" />
@@ -41,8 +41,8 @@
       </ion-radio-group>
     </template>
 
-    <div v-else-if="prevSearchedQuery && isSearching && !products.length" class="empty-state">
-      <p>{{ translate("No results found for", { queryString: prevSearchedQuery }) }}</p>
+    <div v-else-if="queryString && isSearching && !products.length" class="empty-state">
+      <p>{{ translate("No results found for", { queryString }) }}</p>
     </div>
     <div v-else class="empty-state">
       <img src="../assets/images/empty-state-add-product-modal.png" alt="empty-state" />
@@ -95,7 +95,6 @@ let queryString = ref('');
 const isSearching = ref(false);
 const selectedProductId = ref("") as Ref<string>;
 const isLoading = ref(false);
-const prevSearchedQuery = ref("");
 
 async function handleSearch() {
   if(!queryString.value.trim()) {
@@ -121,7 +120,6 @@ async function getProducts() {
     logger.error("Failed to fetch products", err)
   }
   products.value = productsList
-  prevSearchedQuery.value = queryString.value
   isLoading.value = false;
 }
 function closeModal(payload = {}) {