Tests for events [3/5], pointer adjustments

Damian Dulisz · Damian Dulisz · commit ef0f214092e9 · 2016-07-31T23:35:25.000+02:00
* Fixes shentao#6 * Fixes shentao#58 * Related to shentao#48 * Simplify search element management * Still needs more tests and update to older tests for new use cases
diff --git a/docs/main.js b/docs/main.js
@@ -96,19 +96,19 @@ new Vue({
       }
     },
     updateExampleValue (value) {
-      console.log('@change: ', value)
+      console.log('@update: ', value)
       this.exampleValue6 = value
     },
     updateValue (value) {
-      console.log('@change: ', value)
+      console.log('@update: ', value)
       this.value = value
     },
     updateMultiValue (value) {
-      console.log('@change: ', value)
+      console.log('@update: ', value)
       this.multiValue = value
     },
     updateValuePrimitive (value) {
-      console.log('@change: ', value)
+      console.log('@update: ', value)
       this.valuePrimitive = value
     },
     nameWithLang ({ name, language }) {
diff --git a/docs/partials/_getting-started.jade b/docs/partials/_getting-started.jade
@@ -27,7 +27,7 @@
               multiselect(
                 :selected="selected",
                 :options="options",
-                @change="updateSelected"
+                @update="updateSelected"
               )
           pre.language-javascript
             code.
diff --git a/docs/partials/_start.jade b/docs/partials/_start.jade
@@ -19,7 +19,7 @@ section.start
             :limit="3",
             :taggable="true",
             @tag="onTagging"
-            @change="afterChange",
+            @update="afterChange",
             placeholder="Select option",
             select-label="Enter to select"
           )
diff --git a/docs/partials/examples/_ajax-search.jade b/docs/partials/examples/_ajax-search.jade
@@ -13,6 +13,7 @@ p.typo__p
       :multiple="multiple",
       :searchable="searchable",
       :clear-on-select="false",
+      :close-on-select="false",
       :async="true",
       @search-change="asyncFind",
       label="name"
@@ -35,6 +36,7 @@ p.typo__p
           :multiple="multiple",
           :searchable="searchable",
           :clear-on-select="false",
+          :close-on-select="false",
           :async="true",
           @search-change="asyncFind",
           label="name"
diff --git a/docs/partials/examples/_custom.jade b/docs/partials/examples/_custom.jade
@@ -14,9 +14,10 @@ p.typo__p Shows error when touched, but nothing is selected.
         :allow-empty="false",
         :hide-selected="true",
         :touched.sync="isTouched",
+        :close-on-select="false",
         :max-height="400",
         :max="5"
-        @change="updateExampleValue"
+        @update="updateExampleValue"
         placeholder="Pick at least one"
       )
 
@@ -35,9 +36,10 @@ p.typo__p Shows error when touched, but nothing is selected.
             :allow-empty="false",
             :hide-selected="true",
             :touched.sync="isTouched",
+            :close-on-select="false",
             :max-height="400",
             :max="5"
-            @change="updateExampleValue"
+            @update="updateExampleValue"
             placeholder="Pick at least one"
           )
 
diff --git a/docs/partials/examples/_multi-select-search.jade b/docs/partials/examples/_multi-select-search.jade
@@ -8,10 +8,10 @@ p.typo__p Limit visible results to 2.
       :selected="multiValue",
       :multiple="true",
       :searchable="true",
-      :close-on-select="true",
+      :close-on-select="false",
       :clear-on-select="false",
       :limit="2"
-      @change="updateMultiValue",
+      @update="updateMultiValue",
       placeholder="Pick some"
       label="name",
       key="name"
@@ -29,10 +29,10 @@ p.typo__p Limit visible results to 2.
           :selected="multiValue",
           :multiple="true",
           :searchable="true",
-          :close-on-select="true",
+          :close-on-select="false",
           :clear-on-select="false",
           :limit="2"
-          @change="updateMultiValue",
+          @update="updateMultiValue",
           placeholder="Pick some"
           label="name",
           key="name"
diff --git a/docs/partials/examples/_single-select-object.jade b/docs/partials/examples/_single-select-object.jade
@@ -11,7 +11,7 @@ p.typo__p The selected value is referencing the same object as the next example,
       :searchable="false",
       :close-on-select="false",
       :allow-empty="false",
-      @change="updateValue",
+      @update="updateValue",
       deselect-label="Can't remove this value"
       key="name"
       label="name"
@@ -32,7 +32,7 @@ p.typo__p The selected value is referencing the same object as the next example,
           :searchable="false",
           :close-on-select="false",
           :allow-empty="false",
-          @change="updateValue",
+          @update="updateValue",
           deselect-label="Can't remove this value"
           key="name"
           label="name"
diff --git a/docs/partials/examples/_single-select-primitve.jade b/docs/partials/examples/_single-select-primitve.jade
@@ -10,7 +10,7 @@ p.typo__p Disabled all highlight label text.
       :searchable="false",
       :close-on-select="false",
       :show-labels="false"
-      @change="updateValuePrimitive"
+      @update="updateValuePrimitive"
       placeholder="Select one"
       label="name"
     )
@@ -29,7 +29,7 @@ p.typo__p Disabled all highlight label text.
           :searchable="false",
           :close-on-select="false",
           :show-labels="false"
-          @change="updateValuePrimitive"
+          @update="updateValuePrimitive"
           placeholder="Select one"
           label="name"
         )
diff --git a/docs/partials/examples/_single-select-search.jade b/docs/partials/examples/_single-select-search.jade
@@ -9,7 +9,7 @@ p.typo__p The selected value is referencing the same object as the previous exam
       :multiple="false",
       :searchable="true",
       :custom-label="nameWithLang"
-      @change="updateValue",
+      @update="updateValue",
       placeholder="Select one",
       label="name",
       key="name"
@@ -28,7 +28,7 @@ p.typo__p The selected value is referencing the same object as the previous exam
           :multiple="false",
           :searchable="true",
           :custom-label="nameWithLang"
-          @change="updateValue",
+          @update="updateValue",
           placeholder="Select one",
           label="name",
           key="name"
diff --git a/docs/partials/examples/_tagging.jade b/docs/partials/examples/_tagging.jade
@@ -7,11 +7,11 @@ p.typo__p
     multiselect(
       :options="taggingOptions",
       :selected="taggingSelected",
-      :multiple="multiple",
+      :multiple="true",
       :searchable="searchable",
       :taggable="true",
       @tag="addTag",
-      @change="updateSelectedTagging",
+      @update="updateSelectedTagging",
       @select="onSelect",
       @remove="onRemove",
       tag-placeholder="Add this as new tag"
@@ -36,7 +36,7 @@ p.typo__p
           :searchable="searchable",
           :taggable="true",
           @tag="addTag",
-          @change="updateSelectedTagging",
+          @update="updateSelectedTagging",
           @select="onSelect",
           @remove="onRemove",
           tag-placeholder="Add this as new tag"
diff --git a/docs/partials/examples/_vuex.jade b/docs/partials/examples/_vuex.jade
@@ -16,7 +16,7 @@ p.typo__p
       :multiple="false",
       :searchable="false",
       :reset-after="true",
-      @change="dispatchAction",
+      @update="dispatchAction",
       placeholder="Pick action",
     )
 
@@ -30,6 +30,6 @@ p.typo__p
           :multiple="false",
           :searchable="false",
           :reset-after="true",
-          @change="dispatchAction",
+          @update="dispatchAction",
           placeholder="Pick action",
         )
diff --git a/src/Multiselect.vue b/src/Multiselect.vue
@@ -29,7 +29,6 @@
           v-model="search"
           @focus.prevent="activate()"
           @blur.prevent="deactivate()"
-          @input="pointerReset()"
           @keyup.esc="deactivate()"
           @keyup.down="pointerForward()"
           @keyup.up="pointerBackward()"
@@ -51,7 +50,7 @@
               tabindex="0"
               :class="{ 'multiselect__option--highlight': $index === pointer && this.showPointer, 'multiselect__option--selected': !isNotSelected(option) }"
               @mousedown.prevent="select(option)"
-              @mouseover="pointerSet($index)"
+              @mouseenter="pointerSet($index)"
               :data-select="option.isTag ? tagPlaceholder : selectLabel"
               :data-selected="selectedLabel"
               :data-deselect="deselectLabel"
diff --git a/src/multiselectMixin.js b/src/multiselectMixin.js
@@ -207,9 +207,7 @@ module.exports = {
     } else {
       this.value = deepClone(this.selected)
     }
-    if (this.searchable && !this.multiple) {
-      this.search = this.getOptionLabel(this.value)
-    }
+    if (this.searchable) this.adjustSearch()
   },
   computed: {
     filteredOptions () {
@@ -245,9 +243,7 @@ module.exports = {
         this.$set('search', null)
         this.$set('selected', null)
       }
-      if (!this.multiple && this.searchable && this.clearOnSelect) {
-        this.search = this.getOptionLabel(this.value)
-      }
+      this.adjustSearch()
     },
     'search' () {
       this.$emit('search-change', this.search, this.id)
@@ -343,9 +339,9 @@ module.exports = {
             this.removeElement(option)
           } else {
             this.value.push(option)
-            if (this.clearOnSelect) { this.search = '' }
+
             this.$emit('select', deepClone(option), this.id)
-            this.$emit('change', deepClone(this.value), this.id)
+            this.$emit('update', deepClone(this.value), this.id)
           }
         } else {
           const isSelected = this.isSelected(option)
@@ -354,14 +350,11 @@ module.exports = {
 
           this.value = isSelected ? null : option
 
-          if (this.closeOnSelect) this.deactivate()
-          //   this.searchable
-          //     ? this.$els.search.blur()
-          //     : this.$el.blur()
-          // }
           this.$emit('select', deepClone(option), this.id)
-          this.$emit('change', deepClone(this.value), this.id)
+          this.$emit('update', deepClone(this.value), this.id)
         }
+
+        if (this.closeOnSelect) this.deactivate()
       }
     },
     /**
@@ -382,7 +375,7 @@ module.exports = {
           this.value.$remove(option)
         }
         this.$emit('remove', deepClone(option), this.id)
-        this.$emit('change', deepClone(this.value), this.id)
+        this.$emit('update', deepClone(this.value), this.id)
       }
     },
     /**
@@ -427,13 +420,18 @@ module.exports = {
       /* istanbul ignore else  */
       if (this.searchable) {
         this.$els.search.blur()
-        this.search = this.multiple
-          ? ''
-          : this.getOptionLabel(this.value)
+        this.adjustSearch()
       } else {
         this.$el.blur()
       }
     },
+    adjustSearch () {
+      if (!this.searchable || !this.clearOnSelect) return
+
+      this.search = this.multiple
+        ? ''
+        : this.getOptionLabel(this.value)
+    },
     /**
      * Call this.activate() or this.deactivate()
      * depending on this.isOpen value.
diff --git a/src/pointerMixin.js b/src/pointerMixin.js
@@ -15,6 +15,11 @@ module.exports = {
       default: true
     }
   },
+  watch: {
+    'filteredOptions' () {
+      this.pointerAdjust()
+    }
+  },
   methods: {
     addPointerElement () {
       if (this.filteredOptions.length > 0) {
@@ -42,11 +47,20 @@ module.exports = {
       }
     },
     pointerReset () {
+      if (!this.closeOnSelect) return
+
       this.pointer = 0
       if (this.$els.list) {
         this.$els.list.scrollTop = 0
       }
     },
+    pointerAdjust () {
+      if (this.pointer >= this.filteredOptions.length - 1) {
+        this.pointer = this.filteredOptions.length
+          ? this.filteredOptions.length - 1
+          : 0
+      }
+    },
     pointerSet (index) {
       this.pointer = index
     }
diff --git a/test/unit/specs/Multiselect.spec.js b/test/unit/specs/Multiselect.spec.js

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`	`multiselect(`
`28`	`28`	`:selected="selected",`
`29`	`29`	`:options="options",`
`30`		`- @change="updateSelected"`
	`30`	`+ @update="updateSelected"`
`31`	`31`	`)`
`32`	`32`	`pre.language-javascript`
`33`	`33`	`code.`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ section.start`
`19`	`19`	`:limit="3",`
`20`	`20`	`:taggable="true",`
`21`	`21`	`@tag="onTagging"`
`22`		`- @change="afterChange",`
	`22`	`+ @update="afterChange",`
`23`	`23`	`placeholder="Select option",`
`24`	`24`	`select-label="Enter to select"`
`25`	`25`	`)`