diff --git a/src/components/Select.vue b/src/components/Select.vue index ff6705f..b9f987a 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -288,8 +288,8 @@ }, maybeDeleteValue() { - if( ! this.$els.search.value.length ) { - this.value.pop(); + if( ! this.$els.search.value.length && this.value ) { + return this.multiple ? this.value.pop() : this.$set('value', null) } } }, diff --git a/test/unit/Select.spec.js b/test/unit/Select.spec.js index 430433f..ce061a2 100644 --- a/test/unit/Select.spec.js +++ b/test/unit/Select.spec.js @@ -66,6 +66,39 @@ describe('Select.vue', () => { expect( labels ).toEqual( ['This is Foo', 'This is Bar'] ) }) + it('removes the last item in the value array on delete keypress when multiple is true', () => { + + const vm = new Vue({ + template: '
', + components: { vSelect }, + data: { + value: ['one','two'], + options: ['one','two','three'] + } + }).$mount() + + vm.$children[0].maybeDeleteValue() + Vue.nextTick(() => { + expect(vm.$children[0].$get('value')).toEqual(['one']) + }) + }) + + it('sets the value to null on delete keypress when multiple is false', () => { + const vm = new Vue({ + template: '
', + components: { vSelect }, + data: { + value: 'one', + options: ['one','two','three'] + } + }).$mount() + + vm.$children[0].maybeDeleteValue() + Vue.nextTick(() => { + expect(vm.$children[0].$get('value')).toEqual(null) + }) + }) + it('can determine if the value prop is empty', () => { const vm = new Vue({ template: '
',