fix(click) clear index, detect isChild @selected (#137)

The "outside of the results" click handling was using a combination of isOpen and currentIndex being set, while it is better to just detect isChild, which we already had. Clearing currentIndex when you click outside of the result dropdown (implying intent to close). Fixes #136, Fixes #135
darrenjennings · Jul 29, 2019 · 649c206 · 649c206
1 parent d0e8576
commit 649c206
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 23 deletions.
diff --git a/docs/App.vue b/docs/App.vue
@@ -17,7 +17,7 @@
           <div>{{ suggestion && suggestion.item.Name }}</div>
         </template>
         <template slot="after-suggestions">
-          <p v-if="filteredOptions == 0" style="text-align: center;">No Results...</p>
+          <p v-if="filteredOptions == 0" style="text-align: center;">No Results... Try <a style="color: peachpuff;" :href="`https://www.google.com/search?safe=active&source=hp&ei=t_M-Xci6EYq6tgXrzbLoCw&q=${searchText}`" @mouseup.stop target="_blank">googling</a></p>
         </template>
       </vue-autosuggest>
     </div>

diff --git a/docs/build/app.js b/docs/build/app.js
diff --git a/docs/storybook/iframe.html b/docs/storybook/iframe.html
@@ -107,7 +107,7 @@
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="static/preview.e6e6e4efc42d5e7361b5.bundle.js"></script>
+        <script src="static/preview.3dd236c9d05e9c47415f.bundle.js"></script>
       </body>
     </html>
 
diff --git a/...ic/preview.e6e6e4efc42d5e7361b5.bundle.js → ...ic/preview.3dd236c9d05e9c47415f.bundle.js b/...ic/preview.e6e6e4efc42d5e7361b5.bundle.js → ...ic/preview.3dd236c9d05e9c47415f.bundle.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-autosuggest",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Vue autosuggest component.",
   "engines": {
     "node": "> 4",

diff --git a/src/Autosuggest.vue b/src/Autosuggest.vue
@@ -474,14 +474,15 @@ export default {
       /** Do not re-render list on input click  */
       const isChild = this.$el.contains(e.target);
 
-      if (isChild && e.target.tagName === 'INPUT' ||
-        (this.clickedOnScrollbar(e, this.clientXMouseDownInitial))) {
+      /* Clicks outside of dropdown */
+      if (!isChild) {
+        this.loading = true;
+        this.currentIndex = null;
         return;
       }
-      
-      /** Clicks outside of dropdown to exit */
-      if (this.currentIndex === null || !this.isOpen) {
-        this.loading = true;
+
+      if (e.target.tagName === 'INPUT' ||
+        (this.clickedOnScrollbar(e, this.clientXMouseDownInitial))) {
         return;
       }
 

diff --git a/src/parts/DefaultSection.js b/src/parts/DefaultSection.js
@@ -7,13 +7,13 @@ const DefaultSection = {
     renderSuggestion: { type: Function, required: false },
     normalizeItemFunction: { type: Function, required: true }
   },
-  data: function() {
+  data: function () {
     return {
       _currentIndex: null
     }
   },
   computed: {
-    list: function() {
+    list: function () {
       let { limit, data } = this.section;
       if (data.length < limit) {
         limit = data.length;
@@ -22,29 +22,29 @@ const DefaultSection = {
     }
   },
   methods: {
-    getItemIndex(i) {
+    getItemIndex (i) {
       return this.section.start_index + i;
     },
-    getItemByIndex(i) {
+    getItemByIndex (i) {
       return this.section.data[i];
     },
-    onMouseEnter(event) {
+    onMouseEnter (event) {
       const idx = event.currentTarget.getAttribute("data-suggestion-index")
       this._currentIndex = idx
       this.$emit('updateCurrentIndex', idx)
     },
-    onMouseLeave() {
+    onMouseLeave () {
       this.$emit('updateCurrentIndex', null)
     }
   },
   // eslint-disable-next-line no-unused-vars
-  render(h) {
+  render (h) {
     const slots = {
       beforeSection: this.$scopedSlots[`before-section-${this.section.name}`],
       afterSectionDefault: this.$scopedSlots[`after-section`],
       afterSectionNamed: this.$scopedSlots[`after-section-${this.section.name}`]
     }
-    
+
     const beforeClassName = `autosuggest__results-before autosuggest__results-before--${this.section.name}`
     const before = slots.beforeSection && slots.beforeSection({
       section: this.section,
@@ -80,18 +80,18 @@ const DefaultSection = {
                 mouseleave: this.onMouseLeave
               }
             },
-            [this.renderSuggestion ? this.renderSuggestion(item) 
+            [this.renderSuggestion ? this.renderSuggestion(item)
               : this.$scopedSlots.default && this.$scopedSlots.default({
                 _key: key,
                 suggestion: item
-            })]
+              })]
           );
         }),
-        slots.afterSectionDefault && slots.afterSectionDefault({ 
+        slots.afterSectionDefault && slots.afterSectionDefault({
           section: this.section,
           className: `autosuggest__results-after autosuggest__results-after--${this.section.name}`
         }),
-        slots.afterSectionNamed && slots.afterSectionNamed({ 
+        slots.afterSectionNamed && slots.afterSectionNamed({
           section: this.section,
           className: `autosuggest__results_after autosuggest__results-after--${this.section.name}`
         })