Просмотр исходного кода

fix input event handler for Chinese input methods

Evan You 12 лет назад
Родитель
Сommit
4e6ad72709
3 измененных файлов с 19 добавлено и 7 удалено
  1. 9 4
      src/directives/model.js
  2. 4 1
      test/functional/specs/validation.js
  3. 6 2
      test/unit/specs/directives.js

+ 9 - 4
src/directives/model.js

@@ -38,10 +38,15 @@ module.exports = {
                 try {
                     cursorPos = el.selectionStart
                 } catch (e) {}
-                self.vm.$set(self.key, el[attr])
-                if (cursorPos !== undefined) {
-                    el.setSelectionRange(cursorPos, cursorPos)
-                }
+                // `input` event has weird updating issue with
+                // International (e.g. Chinese) input methods,
+                // have to use a Timeout to hack around it...
+                setTimeout(function () {
+                    self.vm.$set(self.key, el[attr])
+                    if (cursorPos !== undefined) {
+                        el.setSelectionRange(cursorPos, cursorPos)
+                    }
+                }, 0)
             }
             : function () {
                 // no filters, don't let it trigger update()

+ 4 - 1
test/functional/specs/validation.js

@@ -4,13 +4,16 @@ casper.test.begin('Validation', 4, function (test) {
     .start('./fixtures/validation.html', function () {
         test.assertElementCount('.valid', 0)
         this.sendKeys('input', '@hello.com')
+    })
+    .then(function () {
         test.assertElementCount('.valid', 1)
 
         this.evaluate(function () {
             document.querySelector('input').setSelectionRange(4,4)
         })
-
         this.sendKeys('input', 'hoho')
+    })
+    .then(function () {
         test.assertElementCount('.valid', 1)
         test.assertField('email', 'hihihoho@hello.com')
     })

+ 6 - 2
test/unit/specs/directives.js

@@ -379,7 +379,7 @@ describe('UNIT: Directives', function () {
                 assert.ok(removed)
             })
 
-            it('should not lock during vm.$set if it has filters', function () {
+            it('should not lock during vm.$set if it has filters', function (done) {
                 var triggered = false
                 var dir = mockDirective('model', 'input', 'text')
                 dir.filters = []
@@ -390,7 +390,11 @@ describe('UNIT: Directives', function () {
                 }}
                 dir.el.value = 'foo'
                 dir.el.dispatchEvent(mockHTMLEvent('input'))
-                assert.ok(triggered)
+                // timeout becuase the update is async
+                setTimeout(function () {
+                    assert.ok(triggered)
+                    done()
+                }, 1)
             })
 
             after(function () {