Merge pull request #2309 from petersopko/#2100-search_url_doesn't_update

kodadot · Feb 10, 2022 · 3e09043 · 3e09043
2 parents 8f954fc + baaf39f
commit 3e09043
Showing 1 changed file with 20 additions and 5 deletions.
diff --git a/components/rmrk/Gallery/Search/SearchBar.vue b/components/rmrk/Gallery/Search/SearchBar.vue
@@ -22,8 +22,10 @@
           @keydown.native.enter="searchResult"
           @keydown.native.up="moveUp"
           @keydown.native.down="moveDown"
+          @keydown.native.delete="makeInputDirty"
           @typing="updateSuggestion"
-          @select="updateSelected">
+          @select="updateSelected"
+          @input="makeInputDirty">
           <template slot-scope="props">
             <div v-if="props.option.type === 'Search'">
               <div class="media">
@@ -161,6 +163,7 @@ export default class SearchBar extends mixins(
   private name = ''
   private searched: NFT[] = []
   private highlightPos = 0
+  private inputDirty = false
 
   public mounted(): void {
     this.getSearchHistory()
@@ -201,6 +204,9 @@ export default class SearchBar extends mixins(
   }
 
   set vListed(listed: boolean) {
+    if (this.inputDirty) {
+      this.searchResult()
+    }
     this.updateListed(listed)
   }
 
@@ -241,7 +247,7 @@ export default class SearchBar extends mixins(
     return v === 'true'
   }
 
-  insertNewHistroy() {
+  insertNewHistory() {
     const newResult = {
       type: 'History',
       name: this.searchString,
@@ -252,14 +258,15 @@ export default class SearchBar extends mixins(
   //Invoked when "enter" key is pressed
   @Debounce(50)
   searchResult() {
+    this.inputDirty = false
     const offset = this.oldSearchResult(this.searchString) ? 0 : 1
 
     //When an item from the autocomplete list is highlighted
     if (this.highlightPos >= 0) {
       const searchCache = this.filterSearch()
       //Highlighted item is NFT or search result from cache
       if (this.highlightPos == 0 && offset) {
-        this.insertNewHistroy()
+        this.insertNewHistory()
         this.updateSearch(this.searchString)
       } else if (this.highlightPos >= searchCache.length + offset) {
         this.updateSelected(
@@ -272,7 +279,7 @@ export default class SearchBar extends mixins(
 
       //Current search string is not present in cache
       if (offset) {
-        this.insertNewHistroy()
+        this.insertNewHistory()
       }
       this.updateSearch(this.searchString)
     }
@@ -289,6 +296,9 @@ export default class SearchBar extends mixins(
   @Emit('update:sortBy')
   @Debounce(400)
   updateSortBy(value: string): string {
+    if (this.inputDirty) {
+      this.searchResult()
+    }
     this.replaceUrl(value, 'sort')
     return value
   }
@@ -300,7 +310,7 @@ export default class SearchBar extends mixins(
     if (value.type == 'History') {
       this.updateSearch(value.name)
     } else if (value.type == 'Search') {
-      this.insertNewHistroy()
+      this.insertNewHistory()
       this.updateSearch(value.name)
     } else {
       this.$router.push({ name: 'rmrk-detail-id', params: { id: value.id } })
@@ -439,6 +449,11 @@ export default class SearchBar extends mixins(
     this.searched = this.searched.filter((r) => r.name !== value)
     localStorage.kodaDotSearchResult = JSON.stringify(this.searched)
   }
+  private makeInputDirty() {
+    if (!this.inputDirty) {
+      return (this.inputDirty = true)
+    }
+  }
 }
 </script>