Changeset c32f47b in tailbone

Timestamp:

08/02/2020 07:13:40 PM (3 years ago)

Author:

Lance Edgar <lance@…>

Branches:

master

Children:

808e737

Parents:

4937855

Message:

Tweak the buefy autocomplete component a bit

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

Location:

tailbone

Files:

• static/js/tailbone.buefy.autocomplete.js (modified) (2 diffs)
• templates/autocomplete.mako (modified) (1 diff)

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

@@ -23 +23 @@
             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 ""
         },
 
@@ -63 +82 @@
 
         itemSelected(value) {
-            this.$emit('input', value)
+            if (this.selected || !value) {
+                this.$emit('input', value)
+            }
         },
 

tailbone/templates/autocomplete.mako

@@ -66 +66 @@
                       :name="name"
                       v-show="!selected"
-                      v-model="autocompleteValue"
+                      v-model="value"
                       :data="data"
                       @typing="getAsyncData"