From f75bb4060ce3074e71781509e8acf61c7514d12a Mon Sep 17 00:00:00 2001
From: Brent McSharry <brentm@adhb.govt.nz>
Date: Wed, 24 Apr 2019 16:40:24 +1200
Subject: [PATCH 1/2] tab and enter handling

---
 src/App.vue             | 76 +++++++++++++----------------------------
 src/VueSingleSelect.vue | 19 ++++++-----
 2 files changed, 33 insertions(+), 62 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9d4e58c..320021a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,60 +1,30 @@
 <template>
     <div id="app" class="mt-2">
-        <vue-single-select      
-            v-model="thread" 
-            :options="threads"
-            :required="true"
-            option-label="a_title"
-            :getOptionDescription="getCustomDescription"
-            option-key="id"
-            name="dude"
-        ></vue-single-select>    
-        <form class="p-2 form w-full bg-x" style="xbackground: yellow" @submit.prevent>
-            <div class="mt-1">
-            <label>foo</label>
-            <input class="search-input inline-block" value="roob">
-            </div>
-            <div v-if="false" class="m-1 p-1" style="width: 50%">
-                <label class="mr-1 inline">select</label>
-                <vue-taggable-select v-on:option-created="addOption"
-                    v-model="fruit" 
-                    :options="fruits"
-                    :taggable="true"
-                ></vue-taggable-select>
-                <hr>
-                {{fruits}}
-                {{fruit}}
-                <br><hr class="mb-4">
-                <vue-taggable-select v-false="true"
-                                  v-model="myThreads"
-                                  :options="threads"
-                                  optionLabel="a_title"
-                                  :max-results="10"
-                >
-
-                </vue-taggable-select>
-            </div>
-            <div v-show="false" class="w-50">
-                <hr>
-                {{nums}}
-                {{numbers}}
-                <br><hr class="mb-4">
-                <vue-taggable-select
-                                  v-model="nums"
-                                  :options="numbers"
-                                  :max-results="4"
-                >
-
-                </vue-taggable-select>
-            </div>
+        <form class="p-2 form w-full bg-x" style="xbackground: yellow" >
+            <vue-single-select      
+                v-model="thread" 
+                :options="threads"
+                :required="true"
+                option-label="a_title"
+                :getOptionDescription="getCustomDescription"
+                option-key="id"
+                name="dude"
+            ></vue-single-select>    
+                <div class="mt-1">
+                <label>foo</label>
+                <input class="search-input inline-block" value="roob">
+                </div>
+            <select class="form-control" name="rob">
+                <option>red</option>
+                <option>blue</option>
+                <option>green</option>
+                <option>yellow</option>
+             </select>
+             <label>bar</label>
+             <input class="search-input inline-block" value="rab">
         </form>
         <hr>
-        <!-- select class="form-control" name="rob">
-             <option>red</option>
-             <option>red</option>
-             <option>red</option>
-             <option>red</option>
-             </select -->
+        <!--  -->
         <button type="button" class="button py-2 px-4 bg-grey-lighter border rounded mt-2" >button</button>
         <hr>
     </div>
diff --git a/src/VueSingleSelect.vue b/src/VueSingleSelect.vue
index 5274dec..cdc9ff3 100644
--- a/src/VueSingleSelect.vue
+++ b/src/VueSingleSelect.vue
@@ -7,11 +7,11 @@
                        :id="inputId"
                        @click="seedSearchText"
                        @focus="seedSearchText"
-                       @keyup.enter="setOption"
-                       @keyup.down="movePointerDown"
-                       @keyup.tab.stop="closeOut"
+                       @keydown.enter.stop="setOption"
+                       @keydown.tab="setOption"
                        @keyup.esc.stop="closeOut"
                        @keyup.up="movePointerUp"
+                       @keyup.down="movePointerDown"
                        :placeholder="placeholder"
                        autocomplete="off"
                        :required="required"
@@ -37,10 +37,9 @@
                         class="cursor-pointer outline-none"
                         @blur="handleClickOutside($event)"
                         @mouseover="setPointerIdx(idx)"
-                        @keyup.enter="setOption()"
                         @keyup.up="movePointerUp()"
                         @keyup.down="movePointerDown()"
-                        @click.prevent="setOption()"
+                        @click.prevent="setOption"
                     >
                         <slot name="option" v-bind="{option,idx}">
                             {{ getOptionDescription(option) }}
@@ -333,7 +332,7 @@ export default {
                  this.pointer--;
              }
          },
-         setOption() {
+         setOption(e) {
              if (!this.matchingOptions || !this.matchingOptions.length) {
                  return;
              }
@@ -345,9 +344,11 @@ export default {
              this.searchText = null;
              this.dropdownOpen = false;
              this.pointer = -1;
-             this.$nextTick().then(() => {
-                 this.$refs.match.focus();
-             });
+             if(!(e && e.code && e.code === 'Tab')) {
+                this.$nextTick().then(() => {
+                    this.$refs.match.focus();
+                });
+             }
          },
          handleClickOutside(e) {
              if (this.$el.contains(e.target)) {

From 0f7b4376b3d6481785297b34927ae9ea91543de5 Mon Sep 17 00:00:00 2001
From: Brent McSharry <2456704+mcshaz@users.noreply.github.com>
Date: Wed, 24 Apr 2019 21:34:15 +1200
Subject: [PATCH 2/2] fix delete searchtext on re-enter

---
 src/VueSingleSelect.vue | 145 +++++++++++++++++++---------------------
 1 file changed, 69 insertions(+), 76 deletions(-)

diff --git a/src/VueSingleSelect.vue b/src/VueSingleSelect.vue
index cdc9ff3..318694a 100644
--- a/src/VueSingleSelect.vue
+++ b/src/VueSingleSelect.vue
@@ -5,9 +5,8 @@
                 <input ref="search"
                        :class="[classes.input, isRequired]"
                        :id="inputId"
-                       @click="seedSearchText"
                        @focus="seedSearchText"
-                       @keydown.enter.stop="setOption"
+                       @keydown.enter.prevent="setOption"
                        @keydown.tab="setOption"
                        @keyup.esc.stop="closeOut"
                        @keyup.up="movePointerUp"
@@ -35,7 +34,6 @@
                         v-for="(option, idx) in matchingOptions" :key="idx"
                         :class="idx === pointer ? classes.activeClass : ''"
                         class="cursor-pointer outline-none"
-                        @blur="handleClickOutside($event)"
                         @mouseover="setPointerIdx(idx)"
                         @keyup.up="movePointerUp()"
                         @keyup.down="movePointerDown()"
@@ -69,46 +67,46 @@
     </div>
 </template>
 <script>
-import pointerScroll from "./pointerScroll";
+import pointerScroll from './pointerScroll';
 export default {
   props: {
     value: {
-      required: true
+      required: true,
     },
     name: {
       type: String,
       required: false,
-      default: () => ""
+      default: () => '',
     },
     options: {
       type: Array,
       required: false,
-      default: () => []
+      default: () => [],
     },
     optionLabel: {
       type: String,
       required: false,
-      default: () => null
+      default: () => null,
     },
     optionKey: {
       type: String,
       required: false,
-      default: () => null
+      default: () => null,
     },
     placeholder: {
       type: String,
       required: false,
-      default: () => "Search Here"
+      default: () => 'Search Here',
     },
     maxHeight: {
       type: String,
-      default: () => "220px",
-      required: false
+      default: () => '220px',
+      required: false,
     },
     inputId: {
       type: String,
-      default: () => "single-select",
-      required: false
+      default: () => 'single-select',
+      required: false,
     },
     classes: {
       type: Object,
@@ -116,42 +114,42 @@ export default {
       default: () => {
         return {
           pointer: -1,
-          wrapper: "single-select-wrapper",
-          input: "search-input",
-          icons: "icons",
-          required: "required",
-          activeClass: "active",
-          dropdown: "dropdown"
+          wrapper: 'single-select-wrapper',
+          input: 'search-input',
+          icons: 'icons',
+          required: 'required',
+          activeClass: 'active',
+          dropdown: 'dropdown',
         };
-      }
+      },
     },
     initial: {
       type: String,
       required: false,
-      default: () => null
+      default: () => null,
     },
     required: {
       type: Boolean,
       required: false,
-      default: () => false
+      default: () => false,
     },
     maxResults: {
       type: Number,
       required: false,
-      default: () => 30
+      default: () => 30,
     },
     tabindex: {
       type: String,
       required: false,
       default: () => {
-        return "";
-      }
+        return '';
+      },
     },
     getOptionDescription: {
       type: Function,
-      default: function (option) {
+      default(option) {
         if (this.optionKey && this.optionLabel) {
-          return option[this.optionKey] + " " + option[this.optionLabel];
+          return option[this.optionKey] + ' ' + option[this.optionLabel];
         }
         if (this.optionLabel) {
           return option[this.optionLabel];
@@ -160,25 +158,25 @@ export default {
           return option[this.optionKey];
         }
         return option;
-      }
+      },
     },
     getOptionValue: {
       type: Function,
-      default: function (option) {
+      default(option) {
         if (this.optionKey) {
           return option[this.optionKey];
         }
-        
+
         if (this.optionLabel) {
           return option[this.optionLabel];
         }
-        
+
         return option;
-      }
+      },
     },
     filterBy: {
       type: Function,
-      default: function (option) {
+      default(option) {
         if (this.optionLabel && this.optionKey) {
           return (
             option[this.optionLabel]
@@ -189,34 +187,34 @@ export default {
               .toString()
               .toLowerCase()
               .includes(this.searchText.toString().toLowerCase())
-          )
+          );
         }
-        
+
         if (this.optionLabel) {
           return option[this.optionLabel]
             .toString()
             .toLowerCase()
-            .includes(this.searchText.toString().toLowerCase())
+            .includes(this.searchText.toString().toLowerCase());
         }
-        
+
         if (this.optionKey) {
           option[this.optionKey]
             .toString()
             .toLowerCase()
-            .includes(this.searchText.toString().toLowerCase())
+            .includes(this.searchText.toString().toLowerCase());
         }
-        
+
         return option
           .toString()
           .toLowerCase()
-          .includes(this.searchText.toString().toLowerCase())
-      }
-    }
+          .includes(this.searchText.toString().toLowerCase());
+      },
+    },
   },
   mixins: [pointerScroll],
   mounted() {
-    document.addEventListener("click", this.handleClickOutside);
-    document.addEventListener("keyup", this.handleClickOutside);
+    document.addEventListener('click', this.handleClickOutside);
+    document.addEventListener('keyup', this.handleClickOutside);
     if (this.value && this.options.includes(this.value)) {
       this.selectedOption = this.value;
       return;
@@ -224,14 +222,14 @@ export default {
     this.searchText = this.initial;
   },
   destroyed() {
-    document.removeEventListener("keyup", this.handleClickOutside);
-    document.removeEventListener("click", this.handleClickOutside);
+    document.removeEventListener('keyup', this.handleClickOutside);
+    document.removeEventListener('click', this.handleClickOutside);
   },
   data() {
     return {
       searchText: null,
       selectedOption: null,
-      dropdownOpen: false
+      dropdownOpen: false,
     };
   },
   watch: {
@@ -244,38 +242,36 @@ export default {
       }
     },
     selectedOption(curr, prev) {
-      this.$emit("input", curr);
+      this.$emit('input', curr);
     },
     dropdownOpen(curr, prev) {
       if (curr === prev) {
         return;
       }
-      
+
       if (!curr) {
         this.searchText = null;
         return;
       }
-      
+
       if (!this.searchText) {
-        this.searchText = "";
-             }
-             
-             this.$nextTick().then(() => {
-                 this.$refs.search.focus();
-             });
-         }
-     },
+        this.searchText = '';
+      }
+      const self = this;
+      this.$nextTick().then(() => {
+         self.$refs.search.focus();
+      });
+    },
+},
      computed: {
          isRequired() {
              if (!this.required) {
-                 return "";
+                 return '';
              }
-             
              if (this.selectedOption) {
-                 return "";
+                 return '';
              }
-             
-             return "required";
+             return 'required';
          },
          matchingOptions() {
              if (this.searchText === null) {
@@ -284,13 +280,10 @@ export default {
              if (!this.searchText.length) {
                  return [...this.options].slice(0, this.maxResults);
              }
-             
              return this.options
-                        .filter(option =>
-                            this.filterBy(option)
-                        )
+                        .filter((option) => this.filterBy(option))
                         .slice(0, this.maxResults);
-         }
+         },
      },
      methods: {
          setPointerIdx(idx) {
@@ -301,7 +294,7 @@ export default {
                  return;
              }
 
-             this.searchText = "";
+             this.searchText = '';
          },
          switchToSearch(event) {
              this.$refs.selectedValue.value = null;
@@ -344,21 +337,21 @@ export default {
              this.searchText = null;
              this.dropdownOpen = false;
              this.pointer = -1;
-             if(!(e && e.code && e.code === 'Tab')) {
+             if (!(e && e.code && e.code === 'Tab')) {
+                const self = this;
                 this.$nextTick().then(() => {
-                    this.$refs.match.focus();
+                    self.$refs.match.focus();
                 });
              }
          },
          handleClickOutside(e) {
-             if (this.$el.contains(e.target)) {
+             if (this.$el.contains(e.target) || e.target.id === this.inputId) {
                  return;
              }
-
              this.dropdownOpen = false;
              this.searchText = null;
-         }
-     }
+         },
+     },
  };
 </script>
 <style scoped>