From 78f6da83997fc299739fba6e0bfc86a486427774 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Mon, 4 Mar 2019 11:24:48 +0100
Subject: [PATCH] Fixed Search Input

---
 components/SearchInput.spec.js |  4 ++++
 components/SearchInput.vue     | 21 +++++++++++++++------
 store/search.js                |  4 ++++
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/components/SearchInput.spec.js b/components/SearchInput.spec.js
index 5d6c3ed4c..065cc6068 100644
--- a/components/SearchInput.spec.js
+++ b/components/SearchInput.spec.js
@@ -1,6 +1,10 @@
 import { shallowMount, mount } from '@vue/test-utils'
 import SearchInput from './SearchInput.vue'
 
+import Vue from 'vue'
+import Styleguide from '@human-connection/styleguide'
+Vue.use(Styleguide)
+
 describe('SearchInput.vue', () => {
   let wrapper
   const mocks = { $t: () => {} }
diff --git a/components/SearchInput.vue b/components/SearchInput.vue
index 773e48d78..b10d5dff9 100644
--- a/components/SearchInput.vue
+++ b/components/SearchInput.vue
@@ -30,8 +30,9 @@
           :icon-right="isActive ? 'close' : null"
           :filter="item => item"
           :options="results"
+          :auto-reset-search="!searchValue"
           :placeholder="$t('search.placeholder')"
-          @keypress.enter.prevent.stop.self="onEnter"
+          @enter="onEnter"
           @focus.capture.native="onFocus"
           @blur.capture.native="onBlur"
           @keyup.delete.native="onDelete"
@@ -162,25 +163,32 @@ export default {
     },
     onFocus(e) {
       clearTimeout(this.searchProcess)
+      //this.$nextTick(() => {
+      //  this.searchValue = this.lastSearchTerm
+      //})
       this.isOpen = true
     },
     onBlur(e) {
+      this.searchValue = this.lastSearchTerm
+      this.$nextTick(() => {
+        this.searchValue = this.lastSearchTerm
+      })
       this.isOpen = false
       clearTimeout(this.searchProcess)
-      this.searchValue = this.lastSearchTerm
     },
     onDelete(e) {
       clearTimeout(this.searchProcess)
       const value = e.target ? e.target.value.trim() : ''
       if (isEmpty(value)) {
         this.clear()
+      } else {
+        this.handleInput(e)
       }
     },
     /**
      * TODO: on enter we should go to a dedicated seach page!?
      */
     onEnter(e) {
-      // console.log('res', this.unprocessedSearchInput)
       // this.isOpen = false
       clearTimeout(this.searchProcess)
       if (!this.pending) {
@@ -189,11 +197,12 @@ export default {
       }
     },
     clear() {
+      this.$emit('clear')
       clearTimeout(this.searchProcess)
       this.isOpen = false
-      this.searchValue = null
-      this.lastSearchTerm = null
-      this.$emit('clear')
+      this.unprocessedSearchInput = ''
+      this.lastSearchTerm = ''
+      this.searchValue = ''
     }
   }
 }
diff --git a/store/search.js b/store/search.js
index 5402b9b79..32e3b6856 100644
--- a/store/search.js
+++ b/store/search.js
@@ -70,6 +70,10 @@ export const actions = {
         commit('SET_QUICK_RESULTS', res.data.findPosts || [])
         commit('SET_QUICK_PENDING', false)
       })
+      .catch(() => {
+        commit('SET_QUICK_RESULTS', [])
+        commit('SET_QUICK_PENDING', false)
+      })
     return getters.quickResults
   },
   async quickClear({ commit }) {