|
@@ -1,6 +1,17 @@
|
|
|
import Vue from 'vue'
|
|
import Vue from 'vue'
|
|
|
import { looseEqual } from 'shared/util'
|
|
import { looseEqual } from 'shared/util'
|
|
|
|
|
|
|
|
|
|
+// Android 4.4 Chrome 30 has the bug that a multi-select option cannot be
|
|
|
|
|
+// deseleted by setting its "selected" prop via JavaScript.
|
|
|
|
|
+function hasMultiSelectBug () {
|
|
|
|
|
+ var s = document.createElement('select')
|
|
|
|
|
+ s.setAttribute('multiple', '')
|
|
|
|
|
+ s.innerHTML = '<option>1</option>'
|
|
|
|
|
+ s.options[0].selected = true
|
|
|
|
|
+ s.options[0].selected = false
|
|
|
|
|
+ return s.options[0].selected !== false
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
/**
|
|
/**
|
|
|
* setting <select>'s value in IE9 doesn't work
|
|
* setting <select>'s value in IE9 doesn't work
|
|
|
* we have to manually loop through the options
|
|
* we have to manually loop through the options
|
|
@@ -187,33 +198,68 @@ describe('Directive v-model select', () => {
|
|
|
}).then(done)
|
|
}).then(done)
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- it('multiple', done => {
|
|
|
|
|
- const vm = new Vue({
|
|
|
|
|
- data: {
|
|
|
|
|
- test: ['b']
|
|
|
|
|
- },
|
|
|
|
|
- template:
|
|
|
|
|
- '<select v-model="test" multiple>' +
|
|
|
|
|
- '<option>a</option>' +
|
|
|
|
|
- '<option>b</option>' +
|
|
|
|
|
- '<option>c</option>' +
|
|
|
|
|
- '</select>'
|
|
|
|
|
- }).$mount()
|
|
|
|
|
- var opts = vm.$el.options
|
|
|
|
|
- expect(opts[0].selected).toBe(false)
|
|
|
|
|
- expect(opts[1].selected).toBe(true)
|
|
|
|
|
- expect(opts[2].selected).toBe(false)
|
|
|
|
|
- vm.test = ['a', 'c']
|
|
|
|
|
- waitForUpdate(() => {
|
|
|
|
|
- expect(opts[0].selected).toBe(true)
|
|
|
|
|
- expect(opts[1].selected).toBe(false)
|
|
|
|
|
- expect(opts[2].selected).toBe(true)
|
|
|
|
|
- opts[0].selected = false
|
|
|
|
|
- opts[1].selected = true
|
|
|
|
|
- triggerEvent(vm.$el, 'change')
|
|
|
|
|
- expect(vm.test).toEqual(['b', 'c'])
|
|
|
|
|
- }).then(done)
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ if (!hasMultiSelectBug()) {
|
|
|
|
|
+ it('multiple', done => {
|
|
|
|
|
+ const vm = new Vue({
|
|
|
|
|
+ data: {
|
|
|
|
|
+ test: ['b']
|
|
|
|
|
+ },
|
|
|
|
|
+ template:
|
|
|
|
|
+ '<select v-model="test" multiple>' +
|
|
|
|
|
+ '<option>a</option>' +
|
|
|
|
|
+ '<option>b</option>' +
|
|
|
|
|
+ '<option>c</option>' +
|
|
|
|
|
+ '</select>'
|
|
|
|
|
+ }).$mount()
|
|
|
|
|
+ var opts = vm.$el.options
|
|
|
|
|
+ expect(opts[0].selected).toBe(false)
|
|
|
|
|
+ expect(opts[1].selected).toBe(true)
|
|
|
|
|
+ expect(opts[2].selected).toBe(false)
|
|
|
|
|
+ vm.test = ['a', 'c']
|
|
|
|
|
+ waitForUpdate(() => {
|
|
|
|
|
+ expect(opts[0].selected).toBe(true)
|
|
|
|
|
+ expect(opts[1].selected).toBe(false)
|
|
|
|
|
+ expect(opts[2].selected).toBe(true)
|
|
|
|
|
+ opts[0].selected = false
|
|
|
|
|
+ opts[1].selected = true
|
|
|
|
|
+ triggerEvent(vm.$el, 'change')
|
|
|
|
|
+ expect(vm.test).toEqual(['b', 'c'])
|
|
|
|
|
+ }).then(done)
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ it('multiple + v-for', done => {
|
|
|
|
|
+ const vm = new Vue({
|
|
|
|
|
+ data: {
|
|
|
|
|
+ test: ['b'],
|
|
|
|
|
+ opts: ['a', 'b', 'c']
|
|
|
|
|
+ },
|
|
|
|
|
+ template:
|
|
|
|
|
+ '<select v-model="test" multiple>' +
|
|
|
|
|
+ '<option v-for="o in opts">{{ o }}</option>' +
|
|
|
|
|
+ '</select>'
|
|
|
|
|
+ }).$mount()
|
|
|
|
|
+ var opts = vm.$el.options
|
|
|
|
|
+ expect(opts[0].selected).toBe(false)
|
|
|
|
|
+ expect(opts[1].selected).toBe(true)
|
|
|
|
|
+ expect(opts[2].selected).toBe(false)
|
|
|
|
|
+ vm.test = ['a', 'c']
|
|
|
|
|
+ waitForUpdate(() => {
|
|
|
|
|
+ expect(opts[0].selected).toBe(true)
|
|
|
|
|
+ expect(opts[1].selected).toBe(false)
|
|
|
|
|
+ expect(opts[2].selected).toBe(true)
|
|
|
|
|
+ opts[0].selected = false
|
|
|
|
|
+ opts[1].selected = true
|
|
|
|
|
+ triggerEvent(vm.$el, 'change')
|
|
|
|
|
+ expect(vm.test).toEqual(['b', 'c'])
|
|
|
|
|
+ // update v-for opts
|
|
|
|
|
+ vm.opts = ['c', 'd']
|
|
|
|
|
+ }).then(() => {
|
|
|
|
|
+ expect(opts[0].selected).toBe(true)
|
|
|
|
|
+ expect(opts[1].selected).toBe(false)
|
|
|
|
|
+ expect(vm.test).toEqual(['c']) // should remove 'd' which no longer has a matching option
|
|
|
|
|
+ }).then(done)
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
it('multiple with static template', () => {
|
|
it('multiple with static template', () => {
|
|
|
const vm = new Vue({
|
|
const vm = new Vue({
|
|
@@ -230,39 +276,6 @@ describe('Directive v-model select', () => {
|
|
|
expect(opts[2].selected).toBe(true)
|
|
expect(opts[2].selected).toBe(true)
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
- it('multiple + v-for', done => {
|
|
|
|
|
- const vm = new Vue({
|
|
|
|
|
- data: {
|
|
|
|
|
- test: ['b'],
|
|
|
|
|
- opts: ['a', 'b', 'c']
|
|
|
|
|
- },
|
|
|
|
|
- template:
|
|
|
|
|
- '<select v-model="test" multiple>' +
|
|
|
|
|
- '<option v-for="o in opts">{{ o }}</option>' +
|
|
|
|
|
- '</select>'
|
|
|
|
|
- }).$mount()
|
|
|
|
|
- var opts = vm.$el.options
|
|
|
|
|
- expect(opts[0].selected).toBe(false)
|
|
|
|
|
- expect(opts[1].selected).toBe(true)
|
|
|
|
|
- expect(opts[2].selected).toBe(false)
|
|
|
|
|
- vm.test = ['a', 'c']
|
|
|
|
|
- waitForUpdate(() => {
|
|
|
|
|
- expect(opts[0].selected).toBe(true)
|
|
|
|
|
- expect(opts[1].selected).toBe(false)
|
|
|
|
|
- expect(opts[2].selected).toBe(true)
|
|
|
|
|
- opts[0].selected = false
|
|
|
|
|
- opts[1].selected = true
|
|
|
|
|
- triggerEvent(vm.$el, 'change')
|
|
|
|
|
- expect(vm.test).toEqual(['b', 'c'])
|
|
|
|
|
- // update v-for opts
|
|
|
|
|
- vm.opts = ['c', 'd']
|
|
|
|
|
- }).then(() => {
|
|
|
|
|
- expect(opts[0].selected).toBe(true)
|
|
|
|
|
- expect(opts[1].selected).toBe(false)
|
|
|
|
|
- expect(vm.test).toEqual(['c']) // should remove 'd' which no longer has a matching option
|
|
|
|
|
- }).then(done)
|
|
|
|
|
- })
|
|
|
|
|
-
|
|
|
|
|
it('multiple selects', (done) => {
|
|
it('multiple selects', (done) => {
|
|
|
const spy = jasmine.createSpy()
|
|
const spy = jasmine.createSpy()
|
|
|
const vm = new Vue({
|
|
const vm = new Vue({
|