fix typeahead: add param to config whether open on focus or not. remo…

…ve click trigger. async-delay rename to debounce.
uiv-lib · Apr 5, 2017 · e337b77 · e337b77
1 parent faf9d84
commit e337b77
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git a/src/components/typeahead/Typeahead.vue b/src/components/typeahead/Typeahead.vue
@@ -56,9 +56,13 @@
       asyncKey: {
         type: String
       },
-      asyncDelay: {
+      debounce: {
         type: Number,
         'default': 200
+      },
+      openOnFocus: {
+        type: Boolean,
+        'default': true
       }
     },
     data () {
@@ -84,15 +88,13 @@
     mounted () {
       this.inputEl = this.$el.querySelector('[data-role="input"]')
       if (this.inputEl) {
-        this.inputEl.addEventListener('click', this.inputFocused)
         this.inputEl.addEventListener('focus', this.inputFocused)
         this.inputEl.addEventListener('input', this.inputChanged)
         this.inputEl.addEventListener('keydown', this.inputKeyPressed)
       }
     },
     beforeDestroy () {
       if (this.inputEl) {
-        this.inputEl.removeEventListener('click', this.inputFocused)
         this.inputEl.removeEventListener('focus', this.inputFocused)
         this.inputEl.removeEventListener('input', this.inputChanged)
         this.inputEl.removeEventListener('keydown', this.inputKeyPressed)
@@ -119,36 +121,35 @@
           }
         }
       },
-      fetchItems (value, asyncDelay) {
+      fetchItems (value, debounce) {
+        clearTimeout(this.timeoutID)
         if (value) {
-          if (this.data) {
-            this.prepareItems(this.data)
-            this.$refs.dropdown.toggle(!!this.items.length)
-          } else if (this.asyncSrc) {
-            clearTimeout(this.timeoutID)
-            this.timeoutID = setTimeout(() => {
+          this.timeoutID = setTimeout(() => {
+            if (this.data) {
+              this.prepareItems(this.data)
+              this.$refs.dropdown.toggle(!!this.items.length)
+            } else if (this.asyncSrc) {
               utils.get(this.asyncSrc + value)
                 .then(data => {
                   this.prepareItems(this.asyncKey ? data[this.asyncKey] : data)
                   this.$refs.dropdown.toggle(!!this.items.length)
                 })
-            }, asyncDelay)
-          }
+            }
+          }, debounce)
         } else {
-          clearTimeout(this.timeoutID)
           this.$refs.dropdown.toggle(false)
         }
       },
       inputChanged () {
         let value = this.inputEl.value
-        this.fetchItems(value, this.asyncDelay)
-        console.log(value)
+        this.fetchItems(value, this.debounce)
         this.$emit('input', this.forceSelect ? null : value)
       },
       inputFocused () {
-        let value = this.inputEl.value
-        this.fetchItems(value, 0)
-        this.$emit('input', this.forceSelect ? null : value)
+        if (this.openOnFocus) {
+          let value = this.inputEl.value
+          this.fetchItems(value, this.debounce) // If set to 0 on sync case dropdown won't open
+        }
       },
       inputKeyPressed (event) {
         if (this.$refs.dropdown.show) {

diff --git a/src/docs/pages/TypeaheadDoc.vue b/src/docs/pages/TypeaheadDoc.vue
@@ -32,7 +32,8 @@
                    :append-to-body="false"
                    :ignore-case="ignoreCase"
                    :match-start="matchStart"
-                   :force-select="forceSelect">
+                   :force-select="forceSelect"
+                   :open-on-focus="true">
           <label class="control-label">States of America</label>
           <input data-role="input" class="form-control" type="text" placeholder="Type to search...">
         </typeahead>
@@ -111,9 +112,18 @@
             <p><code>force-select: Boolean</code>
               Force user to select from the options or the model will be empty. Default: false.</p>
           </li>
+          <li>
+            <p><code>open-on-focus: Boolean</code>
+              Open the typeahead dropdown on focus. Default: true.</p>
+          </li>
           <li>
             <p><code>limit: Number</code> Limit the options size. Default: 10.</p>
           </li>
+          <li>
+            <p><code>debounce: Number</code>
+              Debounce the input for specify milliseconds. Default: 200.
+            </p>
+          </li>
           <li>
             <p><code>async-src: String</code>
               The ajax url to fetch data using GET method, query string will be append to the end of this prop value,
@@ -125,11 +135,6 @@
               The async JSON key to render, leave blank to use the original json object (should be Array).
             </p>
           </li>
-          <li>
-            <p><code>async-delay: Number</code>
-              Debounce the input for specify milliseconds while using async call. Default: 200.
-            </p>
-          </li>
         </ul>
         <h4>Slots</h4>
         <ul>