Merge pull request #1 from tobyzerner/disabled

Fix some selectable functionality
sagalbot · Sep 2, 2019 · 2a54205 · 2a54205
2 parents df59d73 + 9d6a9d6
commit 2a54205
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 16 deletions.
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -58,7 +58,7 @@
           :key="index"
           class="vs__dropdown-option"
           :class="{ 'vs__dropdown-option--selected': isOptionSelected(option), 'vs__dropdown-option--highlight': index === typeAheadPointer, 'vs__dropdown-option--disabled': !selectable(option) }"
-          @mouseover="typeAheadPointer = index"
+          @mouseover="selectable(option) ? typeAheadPointer = index : null"
           @mousedown.prevent.stop="selectable(option) ? select(option) : null"
         >
           <slot name="option" v-bind="normalizeOptionForSlot(option)">

diff --git a/src/mixins/typeAheadPointer.js b/src/mixins/typeAheadPointer.js
@@ -7,35 +7,46 @@ export default {
 
   watch: {
     filteredOptions() {
-      this.typeAheadPointer = 0
+      for (let i = 0; i < this.filteredOptions.length; i++) {
+        if (this.selectable(this.filteredOptions[i])) {
+          this.typeAheadPointer = i;
+          break;
+        }
+      }
     }
   },
 
   methods: {
     /**
      * Move the typeAheadPointer visually up the list by
-     * subtracting the current index by one.
+     * setting it to the previous selectable option.
      * @return {void}
      */
     typeAheadUp() {
-      if (this.typeAheadPointer > 0) {
-        this.typeAheadPointer--
-        if( this.maybeAdjustScroll ) {
-          this.maybeAdjustScroll()
+      for (let i = this.typeAheadPointer - 1; i >= 0; i--) {
+        if (this.selectable(this.filteredOptions[i])) {
+          this.typeAheadPointer = i;
+          if( this.maybeAdjustScroll ) {
+            this.maybeAdjustScroll()
+          }
+          break;
         }
       }
     },
 
     /**
      * Move the typeAheadPointer visually down the list by
-     * adding the current index by one.
+     * setting it to the next selectable option.
      * @return {void}
      */
     typeAheadDown() {
-      if (this.typeAheadPointer < this.filteredOptions.length - 1) {
-        this.typeAheadPointer++
-        if( this.maybeAdjustScroll ) {
-          this.maybeAdjustScroll()
+      for (let i = this.typeAheadPointer + 1; i < this.filteredOptions.length; i++) {
+        if (this.selectable(this.filteredOptions[i])) {
+          this.typeAheadPointer = i;
+          if( this.maybeAdjustScroll ) {
+            this.maybeAdjustScroll()
+          }
+          break;
         }
       }
     },

diff --git a/tests/unit/Selectable.spec.js b/tests/unit/Selectable.spec.js
@@ -24,4 +24,30 @@ describe("Selectable prop", () => {
     Select.find(".vs__dropdown-menu li:last-child").trigger("mousedown");
     expect(Select.vm.selectedValue).toEqual([]);
   });
+
+  it("should skip non-selectable option on down arrow keyUp", () => {
+    const Select = selectWithProps({
+      options: ["one", "two", "three"],
+      selectable: (option) => option !== "two"
+    });
+
+    Select.vm.typeAheadPointer = 1;
+
+    Select.find({ ref: "search" }).trigger("keyup.down");
+
+    expect(Select.vm.typeAheadPointer).toEqual(2);
+  })
+
+  it("should skip non-selectable option on up arrow keyUp", () => {
+    const Select = selectWithProps({
+      options: ["one", "two", "three"],
+      selectable: (option) => option !== "two"
+    });
+
+    Select.vm.typeAheadPointer = 2;
+
+    Select.find({ ref: "search" }).trigger("keyup.up");
+
+    expect(Select.vm.typeAheadPointer).toEqual(0);
+  })
 })
diff --git a/tests/unit/TypeAhead.spec.js b/tests/unit/TypeAhead.spec.js
@@ -18,7 +18,7 @@ describe("Moving the Typeahead Pointer", () => {
     expect(Select.vm.typeAheadPointer).toEqual(0);
   });
 
-  it("should move the pointer visually up the list on up arrow keyDown", () => {
+  it("should move the pointer visually up the list on up arrow keyUp", () => {
     const Select = mountDefault();
 
     Select.vm.typeAheadPointer = 1;
@@ -28,7 +28,7 @@ describe("Moving the Typeahead Pointer", () => {
     expect(Select.vm.typeAheadPointer).toEqual(0);
   });
 
-  it("should move the pointer visually down the list on down arrow keyDown", () => {
+  it("should move the pointer visually down the list on down arrow keyUp", () => {
     const Select = mountDefault();
 
     Select.vm.typeAheadPointer = 1;
@@ -47,7 +47,7 @@ describe("Moving the Typeahead Pointer", () => {
   });
 
   describe("Automatic Scrolling", () => {
-    it("should check if the scroll position needs to be adjusted on up arrow keyDown", () => {
+    it("should check if the scroll position needs to be adjusted on up arrow keyUp", () => {
       const Select = mountDefault();
       const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
 
@@ -57,7 +57,7 @@ describe("Moving the Typeahead Pointer", () => {
       expect(spy).toHaveBeenCalled();
     });
 
-    it("should check if the scroll position needs to be adjusted on down arrow keyDown", () => {
+    it("should check if the scroll position needs to be adjusted on down arrow keyUp", () => {
       const Select = mountDefault();
       const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");