New feature/option: show typeahead on input field focus

voerro · Mar 1, 2020 · e1cd92c · e1cd92c
1 parent fba05fe
commit e1cd92c
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -142,6 +142,7 @@ typeahead-style | String | 'badges' | The autocomplete prompt style. Possible va
 typeahead-max-results | Number | 0 | Maximum number of typeahead results to be shown. 0 - unlimited.
 typeahead-activation-threshold | Number | 1 | Show typeahead results only after at least this many characters were entered. When set to 0, typeahead with all the available tags will be displayed on input focus.
 typeahead-always-show | Boolean | false | Always show typeahead, even if not focused or under typeahead-activation-threshold.
+typeahead-show-on-focus | Boolean | true | Show typeahead on input field focus.
 typeahead-hide-discard | Boolean | false | Hides the 'Discard Search Results' option.
 placeholder | String | 'Add a tag' | The placeholder of the tag input.
 discard-search-text | String | 'Discard Search Results' | The 'Discard Search Results' button text.

diff --git a/index.html b/index.html
@@ -76,6 +76,15 @@ <h2 class="is-size-4" style="margin-bottom: 1rem;">Options</h2>
                         </div>
                     </div>
 
+                    <div v-show="typeahead" class="field">
+                        <div class="control">
+                            <label class="checkbox">
+                                <input type="checkbox" v-model="typeaheadShowOnFocus">
+                                Show Typeahead on focus
+                            </label>
+                        </div>
+                    </div>
+
                     <div v-show="typeahead" class="field">
                         <div class="control">
                             <label class="checkbox">
@@ -211,6 +220,7 @@ <h2 class="is-size-4" style="margin-bottom: 1rem;">Options</h2>
                         :typeahead-max-results="typeaheadMaxResults"
                         :typeahead-activation-threshold="typeaheadActivationThreshold"
                         :typeahead-always-show="typeheadAlwaysShow"
+                        :typeahead-show-on-focus="typeaheadShowOnFocus"
                         :typeahead-hide-discard="typeaheadHideDiscard"
                         :placeholder="placeholder"
                         :limit="limit"
@@ -284,6 +294,7 @@ <h2 class="is-size-5" style="margin-top: 1rem;">Data Events (new at the top)</h2
                 typeaheadMaxResults: 20,
                 typeaheadActivationThreshold: 1,
                 typeheadAlwaysShow: false,
+                typeaheadShowOnFocus: true,
                 logChangeEvents: false,
                 eventLog: '',
             },

diff --git a/src/VoerroTagsInput.vue b/src/VoerroTagsInput.vue
@@ -23,6 +23,7 @@
                 @keyup="onKeyUp"
                 @keyup.esc="clearSearchResults"
                 @focus="onFocus"
+                @click="onClick"
                 @blur="onBlur"
                 @value="tags">
 
@@ -53,7 +54,7 @@
 
             <ul v-else-if="typeaheadStyle === 'dropdown'" :class="`typeahead-${typeaheadStyle}`">
                 <li v-if="!typeaheadHideDiscard" class="tags-input-typeahead-item-default typeahead-hide-btn"
-                    @mousedown.prevent="clearSearchResults"
+                    @click.prevent="clearSearchResults"
                     v-text="discardSearchText"></li>
 
                 <li v-for="(tag, index) in searchResults"
@@ -114,6 +115,11 @@ export default {
             default: false
         },
 
+        typeaheadShowOnFocus: {
+            type: Boolean,
+            default: true
+        },
+
         typeaheadHideDiscard: {
             type: Boolean,
             default: false
@@ -222,9 +228,17 @@ export default {
         if (this.typeaheadAlwaysShow) {
             this.searchTag(false);
         }
+    },
 
+    mounted () {
         // Emit an event
         this.$emit('initialized');
+        
+        document.addEventListener('click', (e) => {
+            if (e.target !== this.$refs['taginput']) {
+                this.clearSearchResults();
+            }
+        });
     },
 
     computed: {
@@ -456,7 +470,7 @@ export default {
                 return false;
             }
 
-            if (this.oldInput != this.input || (!this.searchResults.length && this.typeaheadActivationThreshold == 0) || this.typeaheadAlwaysShow) {
+            if (this.oldInput != this.input || (!this.searchResults.length && this.typeaheadActivationThreshold == 0) || this.typeaheadAlwaysShow || this.typeaheadShowOnFocus) {
                 this.searchResults = [];
                 this.searchSelection = 0;
                 let input = this.input.trim();
@@ -549,6 +563,8 @@ export default {
                     this.searchTag();
                 });
             }
+
+            this.$refs['taginput'].focus();
         },
 
         /**
@@ -662,8 +678,18 @@ export default {
          * @returns void
          */
         onFocus(e) {
-            this.$emit('focus', e)
-            
+            this.$emit('focus', e);  
+        },
+
+        /**
+         * Process the onClick event.
+         * 
+         * @param e
+         * @returns void
+         */
+        onClick(e) {
+            this.$emit('click', e);
+
             this.searchTag();
         },