Improved: search text should selected on focus for better user experi…

…ence (#1uvvc2n)
hotwax · Feb 2, 2023 · 7089643 · 7089643
1 parent 267e54d
commit 7089643
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/src/views/Catalog.vue b/src/views/Catalog.vue
@@ -6,7 +6,7 @@
       </ion-toolbar>
     </ion-header>
     <ion-content>
-      <ion-searchbar v-model="queryString" @keypress.enter="queryString = $event.target.value; getProducts()" />
+      <ion-searchbar @ionFocus="selectSearchBarText($event)" v-model="queryString" @keypress.enter="queryString = $event.target.value; getProducts()" />
       <main>
         <ion-card v-for="product in products.list" :key="product.productId">
           <Image :src="product.mainImageUrl" />
@@ -99,6 +99,11 @@ export default defineComponent({
       };
       await this.store.dispatch("product/findProduct", payload);
     },
+    selectSearchBarText(event: any) {
+      event.target.getInputElement().then((element: any) => {
+        element.select();
+      })
+    },
   },
 
   async ionViewWillEnter() {