+
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 4d7ed22..c9d304b 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -115,6 +115,18 @@
float: left;
line-height: 24px;
}
+ .v-select.single .selected-tag {
+ background-color: transparent;
+ border-color: transparent;
+ }
+ .v-select.single.open .selected-tag {
+ position: absolute;
+ opacity: .5;
+ }
+ .v-select.single.open.searching .selected-tag,
+ .v-select.single.loading .selected-tag {
+ display: none;
+ }
.v-select .selected-tag .close {
float: none;
margin-right: 0;
@@ -131,6 +143,9 @@
filter: alpha(opacity=20);
opacity: .2;
}
+ .v-select.single.searching:not(.open):not(.loading) input[type="search"] {
+ opacity: .2;
+ }
/* Search Input */
.v-select input[type="search"]::-webkit-search-decoration,
.v-select input[type="search"]::-webkit-search-cancel-button,
@@ -704,6 +719,9 @@
* @return {void}
*/
onSearchBlur() {
+ if (this.clearSearchOnBlur) {
+ this.search = ''
+ }
this.open = false
this.$emit('search:blur')
},
@@ -773,12 +791,31 @@
dropdownClasses() {
return {
open: this.dropdownOpen,
+ single: !this.multiple,
+ searching: this.searching,
searchable: this.searchable,
unsearchable: !this.searchable,
loading: this.mutableLoading
}
},
+ /**
+ * If search text should clear on blur
+ * @return {Boolean} True when single and clearSearchOnSelect
+ */
+ clearSearchOnBlur() {
+ return this.clearSearchOnSelect && !this.multiple
+ },
+
+ /**
+ * Return the current state of the
+ * search input
+ * @return {Boolean} True if non empty value
+ */
+ searching() {
+ return !!this.search
+ },
+
/**
* Return the current state of the
* dropdown menu.
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index ba98bf5..7457d21 100644
--- a/test/unit/specs/Select.spec.js
+++ b/test/unit/specs/Select.spec.js
@@ -1144,4 +1144,47 @@ describe('Select.vue', () => {
})
})
})
+
+ describe('Single value options', () => {
+ it('should reset the search input on focus lost', (done) => {
+ const vm = new Vue({
+ template: '
',
+ data: {
+ value: 'one',
+ options: ['one', 'two', 'three']
+ }
+ }).$mount()
+
+ vm.$children[0].open = true
+ vm.$refs.select.search = "t"
+ expect(vm.$refs.select.search).toEqual('t')
+
+ vm.$children[0].onSearchBlur()
+ Vue.nextTick(() => {
+ expect(vm.$refs.select.search).toEqual('')
+ done()
+ })
+ })
+
+ it ('should not reset the search input on focus lost when clearSearchOnSelect is false', (done) => {
+ const vm = new Vue({
+ template: '
',
+ data: {
+ value: 'one',
+ options: ['one', 'two', 'three']
+ }
+ }).$mount()
+ expect(vm.$refs.select.clearSearchOnSelect).toEqual(false)
+
+ vm.$children[0].open = true
+ vm.$refs.select.search = "t"
+ expect(vm.$refs.select.search).toEqual('t')
+
+ vm.$children[0].onSearchBlur()
+ Vue.nextTick(() => {
+ expect(vm.$refs.select.search).toEqual('t')
+ done()
+ })
+ })
+ })
})