avoid v-model with .trim/.number updating value when in focus (fix vuejs#4392)

yyx990803 · yyx990803 · commit 8a7b02a159de · 2016-12-08T10:56:30.000-05:00
diff --git a/src/platforms/web/compiler/directives/model.js b/src/platforms/web/compiler/directives/model.js
@@ -127,10 +127,12 @@ function genDefaultModel (
   valueExpression = number || type === 'number'
     ? `_n(${valueExpression})`
     : valueExpression
+
   let code = genAssignmentCode(value, valueExpression)
   if (isNative && needCompositionGuard) {
     code = `if($event.target.composing)return;${code}`
   }
+
   // inputs with type="file" are read only and setting the input's
   // value will throw an error.
   if (process.env.NODE_ENV !== 'production' &&
@@ -140,8 +142,12 @@ function genDefaultModel (
       `File inputs are read only. Use a v-on:change listener instead.`
     )
   }
+
   addProp(el, 'value', isNative ? `_s(${value})` : `(${value})`)
   addHandler(el, event, code, null, true)
+  if (trim || number || type === 'number') {
+    addHandler(el, 'blur', '$forceUpdate()')
+  }
 }
 
 function genSelect (
diff --git a/src/platforms/web/runtime/modules/dom-props.js b/src/platforms/web/runtime/modules/dom-props.js
@@ -35,7 +35,7 @@ function updateDOMProps (oldVnode: VNodeWithData, vnode: VNodeWithData) {
       elm._value = cur
       // avoid resetting cursor position when value is the same
       const strCur = cur == null ? '' : String(cur)
-      if (elm.value !== strCur && !elm.composing) {
+      if (elm.value !== strCur && !elm.composing && document.activeElement !== elm) {
         elm.value = strCur
       }
     } else {
diff --git a/test/unit/features/directives/model-text.spec.js b/test/unit/features/directives/model-text.spec.js
@@ -64,6 +64,61 @@ describe('Directive v-model text', () => {
     expect(vm.test).toBe('what')
   })
 
+  it('.number focus and typing', (done) => {
+    const vm = new Vue({
+      data: {
+        test: 0,
+        update: 0
+      },
+      template:
+        '<div>' +
+          '<input ref="input" v-model="test" type="number">{{ update }}' +
+          '<input ref="blur"/>' +
+        '</div>'
+    }).$mount()
+    document.body.appendChild(vm.$el)
+    vm.$refs.input.focus()
+    expect(vm.test).toBe(0)
+    vm.$refs.input.value = '1.0'
+    triggerEvent(vm.$refs.input, 'input')
+    expect(vm.test).toBe(1)
+    vm.update++
+    waitForUpdate(() => {
+      expect(vm.$refs.input.value).toBe('1.0')
+      vm.$refs.blur.focus()
+      vm.update++
+    }).then(() => {
+      expect(vm.$refs.input.value).toBe('1')
+    }).then(done)
+  })
+
+  it('.trim focus and typing', (done) => {
+    const vm = new Vue({
+      data: {
+        test: 'abc',
+        update: 0
+      },
+      template:
+        '<div>' +
+          '<input ref="input" v-model.trim="test" type="text">{{ update }}' +
+          '<input ref="blur"/>' +
+        '</div>'
+    }).$mount()
+    document.body.appendChild(vm.$el)
+    vm.$refs.input.focus()
+    vm.$refs.input.value = ' abc '
+    triggerEvent(vm.$refs.input, 'input')
+    expect(vm.test).toBe('abc')
+    vm.update++
+    waitForUpdate(() => {
+      expect(vm.$refs.input.value).toBe(' abc ')
+      vm.$refs.blur.focus()
+      vm.update++
+    }).then(() => {
+      expect(vm.$refs.input.value).toBe('abc')
+    }).then(done)
+  })
+
   it('multiple inputs', (done) => {
     const spy = jasmine.createSpy()
     const vm = new Vue({

Original file line number	Diff line number	Diff line change
`@@ -127,10 +127,12 @@ function genDefaultModel (`
`127`	`127`	`valueExpression = number \|\| type === 'number'`
`128`	`128`	? `_n(${valueExpression})`
`129`	`129`	`: valueExpression`
	`130`	`+`
`130`	`131`	`let code = genAssignmentCode(value, valueExpression)`
`131`	`132`	`if (isNative && needCompositionGuard) {`
`132`	`133`	code = `if($event.target.composing)return;${code}`
`133`	`134`	`}`
	`135`	`+`
`134`	`136`	`// inputs with type="file" are read only and setting the input's`
`135`	`137`	`// value will throw an error.`
`136`	`138`	`if (process.env.NODE_ENV !== 'production' &&`
`@@ -140,8 +142,12 @@ function genDefaultModel (`
`140`	`142`	`File inputs are read only. Use a v-on:change listener instead.`
`141`	`143`	`)`
`142`	`144`	`}`
	`145`	`+`
`143`	`146`	addProp(el, 'value', isNative ? `_s(${value})` : `(${value})`)
`144`	`147`	`addHandler(el, event, code, null, true)`
	`148`	`+ if (trim \|\| number \|\| type === 'number') {`
	`149`	`+ addHandler(el, 'blur', '$forceUpdate()')`
	`150`	`+ }`
`145`	`151`	`}`
`146`	`152`
`147`	`153`	`function genSelect (`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ function updateDOMProps (oldVnode: VNodeWithData, vnode: VNodeWithData) {`
`35`	`35`	`elm._value = cur`
`36`	`36`	`// avoid resetting cursor position when value is the same`
`37`	`37`	`const strCur = cur == null ? '' : String(cur)`
`38`		`- if (elm.value !== strCur && !elm.composing) {`
	`38`	`+ if (elm.value !== strCur && !elm.composing && document.activeElement !== elm) {`
`39`	`39`	`elm.value = strCur`
`40`	`40`	`}`
`41`	`41`	`} else {`