Skip to content

Commit 8a78de6

Browse files
author
Jeff
committed
Merge remote-tracking branch 'origin/feature/input-slot' into release/v3.0
# Conflicts: # src/components/Select.vue
2 parents 03917c4 + c2b92c9 commit 8a78de6

File tree

7 files changed

+175
-55
lines changed

7 files changed

+175
-55
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"@babel/plugin-transform-runtime": "^7.2.0",
3434
"@babel/preset-env": "^7.3.1",
3535
"@babel/runtime": "^7.3.1",
36-
"@vue/test-utils": "1.0.0-beta.20",
36+
"@vue/test-utils": "^1.0.0-beta.29",
3737
"babel-core": "^7.0.0-bridge.0",
3838
"babel-loader": "^8.0.0",
3939
"chokidar": "^2.0.4",

‎src/components/Select.vue

Lines changed: 109 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -323,29 +323,9 @@
323323
</span>
324324
</slot>
325325

326-
<input
327-
ref="search"
328-
v-model="search"
329-
@keydown.delete="maybeDeleteValue"
330-
@keyup.esc="onEscape"
331-
@keydown.up.prevent="typeAheadUp"
332-
@keydown.down.prevent="typeAheadDown"
333-
@keydown.enter.prevent="typeAheadSelect"
334-
@keydown.tab="onTab"
335-
@blur="onSearchBlur"
336-
@focus="onSearchFocus"
337-
type="search"
338-
class="form-control"
339-
:autocomplete="autocomplete"
340-
:disabled="disabled"
341-
:placeholder="searchPlaceholder"
342-
:tabindex="tabindex"
343-
:readonly="!searchable"
344-
:id="inputId"
345-
role="combobox"
346-
:aria-expanded="dropdownOpen"
347-
aria-label="Search for option"
348-
>
326+
<slot name="search" v-bind="scope.search">
327+
<input v-bind="scope.search.attributes" v-on="scope.search.events">
328+
</slot>
349329

350330
</div>
351331
<div class="vs__actions">
@@ -601,7 +581,7 @@
601581
},
602582
603583
/**
604-
* Enable/disable creating options from searchInput.
584+
* Enable/disable creating options from searchEl.
605585
* @type {Boolean}
606586
*/
607587
taggable: {
@@ -732,13 +712,28 @@
732712
type: String,
733713
default: 'auto'
734714
},
715+
735716
/**
736717
* When true, hitting the 'tab' key will select the current select value
737718
* @type {Boolean}
738719
*/
739720
selectOnTab: {
740721
type: Boolean,
741722
default: false
723+
},
724+
725+
/**
726+
* Query Selector used to find the search input
727+
* when the 'search' scoped slot is used.
728+
*
729+
* Must be a valid CSS selector string.
730+
*
731+
* @see https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
732+
* @type {String}
733+
*/
734+
searchInputQuerySelector: {
735+
type: String,
736+
default: '[type=search]'
742737
}
743738
},
744739
@@ -805,7 +800,7 @@
805800
*/
806801
multiple(val) {
807802
this.mutableValue = val ? [] : null
808-
}
803+
},
809804
},
810805
811806
/**
@@ -892,7 +887,7 @@
892887
onAfterSelect(option) {
893888
if (this.closeOnSelect) {
894889
this.open = !this.open
895-
this.$refs.search.blur()
890+
this.searchEl.blur()
896891
}
897892
898893
if (this.clearSearchOnSelect) {
@@ -906,14 +901,14 @@
906901
* @return {void}
907902
*/
908903
toggleDropdown(e) {
909-
if (e.target === this.$refs.openIndicator || e.target === this.$refs.search || e.target === this.$refs.toggle ||
904+
if (e.target === this.$refs.openIndicator || e.target === this.searchEl || e.target === this.$refs.toggle ||
910905
e.target.classList.contains('selected-tag') || e.target === this.$el) {
911906
if (this.open) {
912-
this.$refs.search.blur() // dropdown will close on blur
907+
this.searchEl.blur() // dropdown will close on blur
913908
} else {
914909
if (!this.disabled) {
915910
this.open = true
916-
this.$refs.search.focus()
911+
this.searchEl.focus()
917912
}
918913
}
919914
}
@@ -975,7 +970,7 @@
975970
*/
976971
onEscape() {
977972
if (!this.search.length) {
978-
this.$refs.search.blur()
973+
this.searchEl.blur()
979974
} else {
980975
this.search = ''
981976
}
@@ -1029,7 +1024,7 @@
10291024
* @return {this.value}
10301025
*/
10311026
maybeDeleteValue() {
1032-
if (!this.$refs.search.value.length && this.mutableValue && this.clearable) {
1027+
if (!this.searchEl.value.length && this.mutableValue && this.clearable) {
10331028
return this.multiple ? this.mutableValue.pop() : this.mutableValue = null
10341029
}
10351030
},
@@ -1077,11 +1072,94 @@
10771072
*/
10781073
onMousedown() {
10791074
this.mousedown = true
1075+
},
1076+
1077+
/**
1078+
* Search 'input' KeyBoardEvent handler.
1079+
* @param e {KeyboardEvent}
1080+
* @return {Function}
1081+
*/
1082+
onSearchKeyDown (e) {
1083+
switch (e.keyCode) {
1084+
case 8:
1085+
// delete
1086+
return this.maybeDeleteValue();
1087+
}
1088+
},
1089+
1090+
/**
1091+
* Search 'input' KeyBoardEvent handler.
1092+
* @param e {KeyboardEvent}
1093+
* @return {Function}
1094+
*/
1095+
onSearchKeyUp (e) {
1096+
switch (e.keyCode) {
1097+
case 27:
1098+
// esc
1099+
return this.onEscape();
1100+
case 38:
1101+
// up.prevent
1102+
e.preventDefault();
1103+
return this.typeAheadUp();
1104+
case 40:
1105+
// down.prevent
1106+
e.preventDefault();
1107+
return this.typeAheadDown();
1108+
case 13:
1109+
// enter.prevent
1110+
e.preventDefault();
1111+
return this.typeAheadSelect();
1112+
case 9:
1113+
// tab
1114+
return this.onTab();
1115+
}
10801116
}
10811117
},
10821118
10831119
computed: {
10841120
1121+
/**
1122+
* Find the search input DOM element.
1123+
* @returns {HTMLInputElement}
1124+
*/
1125+
searchEl () {
1126+
return !!this.$scopedSlots['search']
1127+
? this.$refs.selectedOptions.querySelector(this.searchInputQuerySelector)
1128+
: this.$refs.search;
1129+
},
1130+
1131+
/**
1132+
* The object to be bound to the $slots.search scoped slot.
1133+
* @returns {Object}
1134+
*/
1135+
scope () {
1136+
return {
1137+
search: {
1138+
attributes: {
1139+
'disabled': this.disabled,
1140+
'placeholder': this.searchPlaceholder,
1141+
'tabindex': this.tabindex,
1142+
'readonly': !this.searchable,
1143+
'id': this.inputId,
1144+
'aria-expanded': this.dropdownOpen,
1145+
'aria-label': 'Search for option',
1146+
'ref': 'search',
1147+
'role': 'combobox',
1148+
'type': 'search',
1149+
'autocomplete': 'off',
1150+
'class': 'form-control',
1151+
},
1152+
events: {
1153+
'keydown': this.onSearchKeyDown,
1154+
'keyup': this.onSearchKeyUp,
1155+
'blur': this.onSearchBlur,
1156+
'focus': this.onSearchFocus,
1157+
'input': (e) => this.search = e.target.value,
1158+
},
1159+
},
1160+
};
1161+
},
1162+
10851163
/**
10861164
* Classes to be output on .dropdown
10871165
* @return {Object}

‎src/mixins/typeAheadPointer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,4 @@ module.exports = {
5757
}
5858
},
5959
}
60-
}
60+
}

‎tests/helpers.js

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { shallowMount } from "@vue/test-utils";
22
import VueSelect from "../src/components/Select.vue";
3+
import Vue from 'vue';
34

45
/**
56
* Trigger a submit event on the search
@@ -12,9 +13,7 @@ export const searchSubmit = (Wrapper, searchText = false) => {
1213
if (searchText) {
1314
Wrapper.vm.search = searchText;
1415
}
15-
Wrapper.find({ ref: "search" }).trigger("keydown", {
16-
keyCode: 13
17-
});
16+
Wrapper.find({ ref: "search" }).trigger("keyup.enter")
1817
};
1918

2019
/**
@@ -26,3 +25,32 @@ export const searchSubmit = (Wrapper, searchText = false) => {
2625
export const selectWithProps = (propsData = {}) => {
2726
return shallowMount(VueSelect, { propsData });
2827
};
28+
29+
/**
30+
* Returns a Wrapper with a v-select component.
31+
* @param options
32+
* @return {Wrapper<Vue>}
33+
*/
34+
export const mountDefault = (options = {}) =>
35+
shallowMount(VueSelect, {
36+
propsData: { options: ["one", "two", "three"],
37+
...options
38+
}
39+
});
40+
41+
/**
42+
* Returns a v-select component directly.
43+
* @param props
44+
* @param options
45+
* @return {Vue | Element | Vue[] | Element[]}
46+
*/
47+
export const mountWithoutTestUtils = (props = {}, options = {}) => {
48+
return new Vue({
49+
render: createEl => createEl('vue-select', {
50+
ref: 'select',
51+
props: {options: ['one', 'two', 'three'], ...props},
52+
...options
53+
}),
54+
components: {VueSelect},
55+
}).$mount().$refs.select;
56+
};

‎tests/unit/Selecting.spec.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,7 @@ describe("VS - Selecting Values", () => {
5858

5959
const spy = jest.spyOn(Select.vm, "typeAheadSelect");
6060

61-
Select.find({ ref: "search" }).trigger("keydown", {
62-
keyCode: 9
63-
});
61+
Select.find({ ref: "search" }).trigger("keyup.tab");
6462

6563
expect(spy).toHaveBeenCalledWith();
6664
});

‎tests/unit/TypeAhead.spec.js

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
1-
import { shallowMount } from "@vue/test-utils";
1+
import { shallowMount } from '@vue/test-utils';
22
import VueSelect from "../../src/components/Select";
3+
import { mountDefault, mountWithoutTestUtils } from '../helpers';
4+
import typeAheadMixin from '../../src/mixins/typeAheadPointer';
5+
import Vue from 'vue';
36

47
describe("Moving the Typeahead Pointer", () => {
5-
const mountDefault = () =>
6-
shallowMount(VueSelect, {
7-
propsData: { options: ["one", "two", "three"] }
8+
9+
it('should set the pointer to zero when the filteredOptions watcher is called', async () => {
10+
const Select = shallowMount(VueSelect, {
11+
propsData: { options: ['one', 'two', 'three'] },
12+
sync: false
813
});
914

10-
it("should set the pointer to zero when the filteredOptions change", () => {
11-
const Select = mountDefault();
12-
Select.vm.search = "two";
15+
Select.vm.search = 'one';
16+
17+
await Select.vm.$nextTick();
1318
expect(Select.vm.typeAheadPointer).toEqual(0);
1419
});
1520

@@ -18,7 +23,7 @@ describe("Moving the Typeahead Pointer", () => {
1823

1924
Select.vm.typeAheadPointer = 1;
2025

21-
Select.find({ ref: "search" }).trigger("keydown", { keyCode: 38 });
26+
Select.find({ ref: "search" }).trigger("keyup.up");
2227

2328
expect(Select.vm.typeAheadPointer).toEqual(0);
2429
});
@@ -28,7 +33,7 @@ describe("Moving the Typeahead Pointer", () => {
2833

2934
Select.vm.typeAheadPointer = 1;
3035

31-
Select.find({ ref: "search" }).trigger("keydown", { keyCode: 40 });
36+
Select.find({ ref: "search" }).trigger("keyup.down");
3237

3338
expect(Select.vm.typeAheadPointer).toEqual(2);
3439
});
@@ -48,7 +53,7 @@ describe("Moving the Typeahead Pointer", () => {
4853

4954
Select.vm.typeAheadPointer = 1;
5055

51-
Select.find({ ref: "search" }).trigger("keydown", { keyCode: 38 });
56+
Select.find({ ref: "search" }).trigger("keyup.up");
5257
expect(spy).toHaveBeenCalled();
5358
});
5459

@@ -58,11 +63,16 @@ describe("Moving the Typeahead Pointer", () => {
5863

5964
Select.vm.typeAheadPointer = 1;
6065

61-
Select.find({ ref: "search" }).trigger("keydown", { keyCode: 40 });
66+
Select.find({ ref: "search" }).trigger("keyup.down");
6267
expect(spy).toHaveBeenCalled();
6368
});
6469

65-
it("should check if the scroll position needs to be adjusted when filtered options changes", () => {
70+
/**
71+
* This test fails despite working in the browser.
72+
* After many attempts to get it to pass, it's been
73+
* rewritten below.
74+
*/
75+
it.skip("should check if the scroll position needs to be adjusted when filtered options changes", () => {
6676
const Select = mountDefault();
6777
const spy = jest.spyOn(Select.vm, "maybeAdjustScroll");
6878

0 commit comments

Comments
 (0)