From 8d99266c0d18774a49f7fae56be7942c24ba2719 Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Sun, 15 Sep 2019 09:03:08 -0700
Subject: [PATCH] add scroll handler when dropdown menu is attached

---
 src/components/Select.vue    | 32 ++++++++++++++-
 tests/unit/Scrolling.spec.js | 77 ++++++++++++++++++++++++++++++++++++
 tests/unit/TypeAhead.spec.js | 73 ----------------------------------
 3 files changed, 107 insertions(+), 75 deletions(-)
 create mode 100644 tests/unit/Scrolling.spec.js

diff --git a/src/components/Select.vue b/src/components/Select.vue
index a80efdd..10d7d63 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -51,7 +51,14 @@
     </div>
 
     <transition :name="transition">
-      <ul ref="dropdownMenu" v-if="dropdownOpen" class="vs__dropdown-menu" role="listbox" @mousedown="onMousedown" @mouseup="onMouseUp">
+      <ul
+        ref="dropdownMenu"
+        v-if="dropdownOpen"
+        class="vs__dropdown-menu"
+        role="listbox"
+        @mousedown="onMousedown"
+        @mouseup="onMouseUp"
+      >
         <li
           role="option"
           v-for="(option, index) in filteredOptions"
@@ -299,6 +306,19 @@
         },
       },
 
+      /**
+       * Handler attached to the @scroll event of the
+       * dropdown menu.
+       * @type {Function}
+       */
+      // onScroll: {
+      //   type: Function,
+      //   default(event) {
+      //     console.debug(this);
+      //     return this.$emit('scroll', event);
+      //   },
+      // },
+
       /**
        * Enable/disable creating options from searchEl.
        * @type {Boolean}
@@ -502,7 +522,15 @@
        */
       multiple() {
         this.clearSelection()
-      }
+      },
+
+      dropdownOpen(open) {
+        this.$nextTick(function() {
+          if (open && typeof this.$refs.dropdownMenu !== 'undefined') {
+            this.$refs.dropdownMenu.onscroll = event => this.$emit('scroll', event);
+          }
+        });
+      },
     },
 
     created() {
diff --git a/tests/unit/Scrolling.spec.js b/tests/unit/Scrolling.spec.js
new file mode 100644
index 0000000..fbbc334
--- /dev/null
+++ b/tests/unit/Scrolling.spec.js
@@ -0,0 +1,77 @@
+import { mountDefault } from '../helpers';
+
+describe("Automatic Scrolling", () => {
+  it("should check if the scroll position needs to be adjusted on up arrow keyDown", () => {
+    const Select = mountDefault();
+    const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
+
+    Select.vm.typeAheadPointer = 1;
+
+    Select.find({ ref: "search" }).trigger("keyup.up");
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it("should check if the scroll position needs to be adjusted on down arrow keyDown", () => {
+    const Select = mountDefault();
+    const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
+
+    Select.vm.typeAheadPointer = 1;
+
+    Select.find({ ref: "search" }).trigger("keyup.down");
+    expect(spy).toHaveBeenCalled();
+  });
+
+  /**
+   * This test fails despite working in the browser.
+   * Many attempts to get it to pass.
+   */
+  it.skip("should check if the scroll position needs to be adjusted when filtered options changes", () => {
+    const Select = mountDefault();
+    const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
+
+    Select.vm.search = "two";
+
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it("should scroll up if the pointer is above the current viewport bounds", () => {
+    const Select = mountDefault();
+    const spy = jest.spyOn(Select.vm, "scrollTo");
+
+    Select.setMethods({
+      pixelsToPointerTop() {
+        return 1;
+      },
+      viewport() {
+        return { top: 2, bottom: 0 };
+      }
+    });
+
+    Select.vm.maybeAdjustScroll();
+
+    expect(spy).toHaveBeenCalledWith(1);
+  });
+
+  it("should scroll down if the pointer is below the current viewport bounds", () => {
+    const Select = mountDefault();
+    const spy = jest.spyOn(Select.vm, "scrollTo");
+
+    Select.setMethods({
+      pixelsToPointerBottom() {
+        return 2;
+      },
+      viewport() {
+        return { top: 0, bottom: 1 };
+      }
+    });
+
+    Select.vm.maybeAdjustScroll();
+    expect(spy).toHaveBeenCalledWith(
+      Select.vm.viewport().top + Select.vm.pointerHeight()
+    );
+  });
+
+  describe('scroll events', () => {
+
+  });
+});
diff --git a/tests/unit/TypeAhead.spec.js b/tests/unit/TypeAhead.spec.js
index 31a2f57..92b40bf 100755
--- a/tests/unit/TypeAhead.spec.js
+++ b/tests/unit/TypeAhead.spec.js
@@ -46,79 +46,6 @@ describe("Moving the Typeahead Pointer", () => {
     expect(Select.vm.typeAheadPointer).toEqual(2);
   });
 
-  describe("Automatic Scrolling", () => {
-    it("should check if the scroll position needs to be adjusted on up arrow keyDown", () => {
-      const Select = mountDefault();
-      const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
-
-      Select.vm.typeAheadPointer = 1;
-
-      Select.find({ ref: "search" }).trigger("keyup.up");
-      expect(spy).toHaveBeenCalled();
-    });
-
-    it("should check if the scroll position needs to be adjusted on down arrow keyDown", () => {
-      const Select = mountDefault();
-      const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
-
-      Select.vm.typeAheadPointer = 1;
-
-      Select.find({ ref: "search" }).trigger("keyup.down");
-      expect(spy).toHaveBeenCalled();
-    });
-
-    /**
-     * This test fails despite working in the browser.
-     * After many attempts to get it to pass, it's been
-     * rewritten below.
-     */
-    it.skip("should check if the scroll position needs to be adjusted when filtered options changes", () => {
-      const Select = mountDefault();
-      const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
-
-      Select.vm.search = "two";
-
-      expect(spy).toHaveBeenCalled();
-    });
-
-    it("should scroll up if the pointer is above the current viewport bounds", () => {
-      const Select = mountDefault();
-      const spy = jest.spyOn(Select.vm, "scrollTo");
-
-      Select.setMethods({
-        pixelsToPointerTop() {
-          return 1;
-        },
-        viewport() {
-          return { top: 2, bottom: 0 };
-        }
-      });
-
-      Select.vm.maybeAdjustScroll();
-
-      expect(spy).toHaveBeenCalledWith(1);
-    });
-
-    it("should scroll down if the pointer is below the current viewport bounds", () => {
-      const Select = mountDefault();
-      const spy = jest.spyOn(Select.vm, "scrollTo");
-
-      Select.setMethods({
-        pixelsToPointerBottom() {
-          return 2;
-        },
-        viewport() {
-          return { top: 0, bottom: 1 };
-        }
-      });
-
-      Select.vm.maybeAdjustScroll();
-      expect(spy).toHaveBeenCalledWith(
-        Select.vm.viewport().top + Select.vm.pointerHeight()
-      );
-    });
-  });
-
   describe("Measuring pixel distances", () => {
     it("should calculate pointerHeight as the offsetHeight of the pointer element if it exists", () => {
       const Select = mountDefault();