From c32f47ba9533fe4c27625629fe6b5f27a4377873 Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Sun, 2 Aug 2020 19:13:40 -0500
Subject: [PATCH] Tweak the buefy autocomplete component a bit

to better support staying in sync w/ data on the caller/parent side
---
 .../static/js/tailbone.buefy.autocomplete.js  | 35 +++++++++++++++----
 tailbone/templates/autocomplete.mako          |  2 +-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/tailbone/static/js/tailbone.buefy.autocomplete.js b/tailbone/static/js/tailbone.buefy.autocomplete.js
index 669b3c1f..fc64a073 100644
--- a/tailbone/static/js/tailbone.buefy.autocomplete.js
+++ b/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?
diff --git a/tailbone/templates/autocomplete.mako b/tailbone/templates/autocomplete.mako
index 7ec61f4c..c9de4507 100644
--- a/tailbone/templates/autocomplete.mako
+++ b/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"