From 3d9344a0ed89fb31ac4683fd41b365de08eb975d Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Fri, 11 Feb 2022 11:25:07 +0530
Subject: [PATCH] refactor: search bar vo vue3, remove 'x'

---
 src/components/SearchBar.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 74e51d2b..dc28540a 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -22,9 +22,13 @@
             autocomplete="off"
             spellcheck="false"
             v-model="inputValue"
-            @input="search"
+            @input="
+              () => {
+                search();
+                toggleDropdown(true);
+              }
+            "
             ref="input"
-            @focus="$toggleDropdown = toggleDropdown"
             @keydown.up="highlightItemUp"
             @keydown.down="highlightItemDown"
             @keydown.enter="selectHighlightedItem"
@@ -48,7 +52,6 @@ export default {
       inputValue: '',
       searchList: [],
       suggestions: [],
-      $toggleDropdown: null,
     };
   },
   components: {
@@ -60,8 +63,6 @@ export default {
   },
   methods: {
     async search() {
-      this.$toggleDropdown && this.$toggleDropdown(true);
-
       this.suggestions = this.searchList.filter((d) => {
         let key = this.inputValue.toLowerCase();
         return d.label.toLowerCase().includes(key);
@@ -124,3 +125,11 @@ export default {
   },
 };
 </script>
+<style scoped>
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  display: none;
+}
+</style>