Merge branch 'fix-tt-autocomplete' into 'master'

Fixed Bug when typing that the first character is dismissed when clearing the input field

See merge request fronk/thetool!795

public/plugins/vue/tt-components/tt-autocomplete.js

@@ -1,6 +1,8 @@
 //TODO: if autocomplete is focus and the input has not a single character still show "Bitte mindestens 3 Zeichen eingeben"
 //TODO: fix the fetchSuggestions function to not show a loading spinner when the input gets cleared
 //TODO: fix so we can use arrow keys to navigate the suggestions
+// TODO: Implement giving the option without the need of an API || need to use computed property to filter the items
+// TODO: Fix the weirdness with timeout and selecting the suggestion
 
 Vue.component('tt-autocomplete', {
     template: `
@@ -66,9 +68,8 @@ Vue.component('tt-autocomplete', {
                     </ul>
                   </div>
                 </div>
-              `, // TODO: Implement giving the option without the need of an API || need to use computed property to filter the items
-    // TODO: Fix the weirdness with timeout and selecting the suggestion
-    props:      {
+              `,
+    props: {
         value:       {type: [String, Number]},
         label:       {type: String, required: false},
         apiUrl:      String,
@@ -76,19 +77,26 @@ Vue.component('tt-autocomplete', {
         items:       {type: Array, default: () => []},
         sm:          {type: Boolean, default: true},
         row:         {type: Boolean, default: false},
-    }, async mounted() {
-        this.updateDisplayValue().then();
     }, data() {
         return {
-            displayingItems: [], displayValue: '', isLoading: false, showSuggestions: false, cursor: -1, fetchSuggestionsDebounceTimer: null, disableIDFetch: false
+            displayingItems:               [],
+            oldDisplayValue:               '',
+            displayValue:                  '',
+            isLoading:                     false,
+            showSuggestions:               false,
+            cursor:                        -1,
+            fetchSuggestionsDebounceTimer: null,
+            disableIDFetch:                false
         };
-    }, watch:   {
-        value: {handler: 'updateDisplayValue', immediate: true},
-        apiUrl() {
-            this.fetchSuggestions();
+    },
+    async mounted() {
+        this.updateDisplayValue().then();
+    },
+    methods: {
+        setOldDisplayValue(newValue, oldValue) {
+            this.oldDisplayValue = oldValue;
         },
-    }, methods: {
-        async updateDisplayValue(newValue) {
+        async updateDisplayValue(newValue, oldValue) {
             if (this.disableIDFetch) {
                 this.disableIDFetch = false;
                 return;
@@ -106,7 +114,7 @@ Vue.component('tt-autocomplete', {
                 this.displayValue = selectedItem ? selectedItem.text : '';
             } else {
                 this.$emit('input', '');
-                this.displayValue = '';
+                this.displayValue = this.displayValue.replace(this.oldDisplayValue, '');
             }
         },
         onInput(event) {
@@ -175,4 +183,9 @@ Vue.component('tt-autocomplete', {
             this.$emit('input', '');
         }
     },
+    watch:   {
+        displayValue: {handler: 'setOldDisplayValue', immediate: true},
+        value:        {handler: 'updateDisplayValue', immediate: true},
+        apiUrl:       {handler: 'fetchSuggestions', immediate: true},
+    }
 });