Prevent unecessary input trigger with v-model (vuejs#5589)

posva · yyx990803 · commit d52a4991bd6c · 2017-05-07T21:46:33.000+08:00
* Prevent unecessary input trigger with v-model Fix vuejs#5586 * Add test for compositionend on v-model + @input * [skip ci] Rename tests for compositionend
diff --git a/src/platforms/web/runtime/directives/model.js b/src/platforms/web/runtime/directives/model.js
@@ -119,6 +119,8 @@ function onCompositionStart (e) {
 }
 
 function onCompositionEnd (e) {
+  // prevent triggering an input event for no reason
+  if (!e.target.composing) return
   e.target.composing = false
   trigger(e.target, 'input')
 }
diff --git a/test/unit/features/directives/model-text.spec.js b/test/unit/features/directives/model-text.spec.js
@@ -249,4 +249,49 @@ describe('Directive v-model text', () => {
     }).$mount()
     expect('You are binding v-model directly to a v-for iteration alias').toHaveBeenWarned()
   })
+
+  it('does not trigger extra input events with single compositionend', () => {
+    const spy = jasmine.createSpy()
+    const vm = new Vue({
+      data: {
+        a: 'a'
+      },
+      template: '<input v-model="a" @input="onInput">',
+      methods: {
+        onInput (e) {
+          spy(e.target.value)
+        }
+      }
+    }).$mount()
+    console.log(spy.calls.count())
+    expect(spy.calls.count()).toBe(0)
+    vm.$el.value = 'b'
+    triggerEvent(vm.$el, 'input')
+    expect(spy.calls.count()).toBe(1)
+    triggerEvent(vm.$el, 'compositionend')
+    expect(spy.calls.count()).toBe(1)
+  })
+
+  it('triggers extra input on compositionstart + end', () => {
+    const spy = jasmine.createSpy()
+    const vm = new Vue({
+      data: {
+        a: 'a'
+      },
+      template: '<input v-model="a" @input="onInput">',
+      methods: {
+        onInput (e) {
+          spy(e.target.value)
+        }
+      }
+    }).$mount()
+    console.log(spy.calls.count())
+    expect(spy.calls.count()).toBe(0)
+    vm.$el.value = 'b'
+    triggerEvent(vm.$el, 'input')
+    expect(spy.calls.count()).toBe(1)
+    triggerEvent(vm.$el, 'compositionstart')
+    triggerEvent(vm.$el, 'compositionend')
+    expect(spy.calls.count()).toBe(2)
+  })
 })

Original file line number	Diff line number	Diff line change
`@@ -119,6 +119,8 @@ function onCompositionStart (e) {`
`119`	`119`	`}`
`120`	`120`
`121`	`121`	`function onCompositionEnd (e) {`
	`122`	`+ // prevent triggering an input event for no reason`
	`123`	`+ if (!e.target.composing) return`
`122`	`124`	`e.target.composing = false`
`123`	`125`	`trigger(e.target, 'input')`
`124`	`126`	`}`