fix(scroll) don't close autosuggest when clicking on scrollbar (#64)

* destroy event listeners in beforeDestroy lifecycle * tests(listener) trigger mousedown as well
darrenjennings · Oct 11, 2018 · 5eb0f9a · 5eb0f9a
1 parent fd68510
commit 5eb0f9a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/__tests__/autosuggest.test.js b/__tests__/autosuggest.test.js
@@ -212,7 +212,10 @@ describe("Autosuggest", () => {
 
     input.trigger("click");
     wrapper.setData({ searchInput: "G" });
+    window.document.dispatchEvent(new Event("mousedown"));
     window.document.dispatchEvent(new Event("mouseup"));
+
+    await wrapper.vm.$nextTick(() => {});
 
     const renderer = createRenderer();
     renderer.renderToString(wrapper.vm, (err, str) => {

diff --git a/src/Autosuggest.vue b/src/Autosuggest.vue
@@ -169,7 +169,8 @@ export default {
       defaultSectionConfig: {
         name: "default",
         type: "default-section"
-      }
+      },
+      clientXMouseDownInitial: null
     };
   },
   computed: {
@@ -282,8 +283,13 @@ export default {
   },
   mounted() {
     document.addEventListener("mouseup", this.onDocumentMouseUp);
+    document.addEventListener("mousedown", this.onDocumentMouseDown);
     this.loading = true;
   },
+  beforeDestroy() {
+    document.removeEventListener("mouseup", this.onDocumentMouseUp)
+    document.removeEventListener("mousedown", this.onDocumentMouseDown)
+  },
   methods: {
     getSectionRef(i) {
       return "computed_section_" + i;
@@ -440,10 +446,17 @@ export default {
     updateCurrentIndex(index) {
       this.currentIndex = index;
     },
+    clickedOnScrollbar(mouseX){
+      const results = document.querySelector(`.${this.componentAttrClassAutosuggestResultsContainer}`);
+      return results.offsetWidth <= mouseX;
+    },
+    onDocumentMouseDown(e) {
+      this.clientXMouseDownInitial = e.clientX
+    },
     onDocumentMouseUp(e) {
       /** Do not re-render list on input click  */
       const isChild = this.$el.contains(e.target);
-      if (isChild && e.target.tagName === 'INPUT') {
+      if (isChild && e.target.tagName === 'INPUT' || this.clickedOnScrollbar(this.clientXMouseDownInitial)) {
         return;
       }