Tweak the buefy autocomplete component a bit

to better support staying in sync w/ data on the caller/parent side

tailbone/static/js/tailbone.buefy.autocomplete.js

@@ -22,23 +22,42 @@ const TailboneAutocomplete = {
             data: [],
             selected: selected,
             isFetching: false,
-            autocompleteValue: this.value,
         }
     },
 
+    watch: {
+        value(to, from) {
+            if (from && !to) {
+                this.clearSelection(false)
+            }
+        },
+    },
+
     methods: {
 
-        clearSelection() {
+        clearSelection(focus) {
+            if (focus === undefined) {
+                focus = true
+            }
             this.selected = null
-            this.autocompleteValue = null
-            this.$nextTick(function() {
-                this.$refs.autocomplete.focus()
-            })
+            this.value = null
+            if (focus) {
+                this.$nextTick(function() {
+                    this.$refs.autocomplete.focus()
+                })
+            }
 
             // TODO: should emit event for caller logic (can they cancel?)
             // $('#' + oid + '-textbox').trigger('autocompletevaluecleared');
         },
 
+        getDisplayText() {
+            if (this.selected) {
+                return this.selected.label
+            }
+            return ""
+        },
+
         // TODO: should we allow custom callback? or is event enough?
         // function (oid) {
         //     $('#' + oid + '-textbox').on('autocompletevaluecleared', function() {
@@ -62,7 +81,9 @@ const TailboneAutocomplete = {
         // }
 
         itemSelected(value) {
-            this.$emit('input', value)
+            if (this.selected || !value) {
+                this.$emit('input', value)
+            }
         },
 
         // TODO: buefy example uses `debounce()` here and perhaps we should too?

tailbone/templates/autocomplete.mako

@@ -65,7 +65,7 @@
       <b-autocomplete ref="autocomplete"
                       :name="name"
                       v-show="!selected"
-                      v-model="autocompleteValue"
+                      v-model="value"
                       :data="data"
                       @typing="getAsyncData"
                       @select="selectionMade"