From 021e380a852b00f9ecef941c14c19a369124eac9 Mon Sep 17 00:00:00 2001 From: LeuisKen Date: Wed, 3 Jan 2018 11:42:20 +0800 Subject: [PATCH 1/4] fix:issue#7367 --- src/platforms/web/runtime/directives/model.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platforms/web/runtime/directives/model.js b/src/platforms/web/runtime/directives/model.js index c3b669f3bb5..dd9c4d8b438 100644 --- a/src/platforms/web/runtime/directives/model.js +++ b/src/platforms/web/runtime/directives/model.js @@ -39,7 +39,7 @@ const directive = { // this also fixes the issue where some browsers e.g. iOS Chrome // fires "change" instead of "input" on autocomplete. el.addEventListener('change', onCompositionEnd) - if (!isAndroid) { + if (typeof window.CompositionEvent === 'function') { el.addEventListener('compositionstart', onCompositionStart) el.addEventListener('compositionend', onCompositionEnd) } From c10a42cf73de19c906e7a10b4b88f99a7cabf318 Mon Sep 17 00:00:00 2001 From: LeuisKen Date: Wed, 3 Jan 2018 14:21:28 +0800 Subject: [PATCH 2/4] fix:fix some issue about lint and unit test --- src/platforms/web/runtime/directives/model.js | 2 +- test/unit/features/directives/model-text.spec.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/platforms/web/runtime/directives/model.js b/src/platforms/web/runtime/directives/model.js index dd9c4d8b438..3457fc15fe9 100644 --- a/src/platforms/web/runtime/directives/model.js +++ b/src/platforms/web/runtime/directives/model.js @@ -6,7 +6,7 @@ import { isTextInputType } from 'web/util/element' import { looseEqual, looseIndexOf } from 'shared/util' import { mergeVNodeHook } from 'core/vdom/helpers/index' -import { warn, isAndroid, isIE9, isIE, isEdge } from 'core/util/index' +import { warn, isIE9, isIE, isEdge } from 'core/util/index' /* istanbul ignore if */ if (isIE9) { diff --git a/test/unit/features/directives/model-text.spec.js b/test/unit/features/directives/model-text.spec.js index 7aae24b654e..f2746d4a52b 100644 --- a/test/unit/features/directives/model-text.spec.js +++ b/test/unit/features/directives/model-text.spec.js @@ -1,5 +1,5 @@ import Vue from 'vue' -import { isIE9, isIE, isAndroid } from 'core/util/env' +import { isIE9, isIE } from 'core/util/env' describe('Directive v-model text', () => { it('should update value both ways', done => { @@ -183,7 +183,7 @@ describe('Directive v-model text', () => { }) } - if (!isAndroid) { + if (typeof window.CompositionEvent === 'function') { it('compositionevents', function (done) { const vm = new Vue({ data: { @@ -291,7 +291,7 @@ describe('Directive v-model text', () => { expect('conflicts with v-model').not.toHaveBeenWarned() }) - if (!isAndroid) { + if (!typeof window.CompositionEvent === 'function') { it('does not trigger extra input events with single compositionend', () => { const spy = jasmine.createSpy() const vm = new Vue({ From 19c9177aa1d5e19dc65b3e412c11bd1b12c47b15 Mon Sep 17 00:00:00 2001 From: LeuisKen Date: Fri, 5 Jan 2018 11:50:12 +0800 Subject: [PATCH 3/4] refactor:check isCompositionEventSupported only once run isCompositionEventSupported check only once according to the code review suggestion. and since e.target.composing only set by onCompositionStart handler, and when isCompositionEventSupported === false there is no onCompositionStart handler, so move the onCompositionEnd handler of change event into the if condition. --- src/platforms/web/runtime/directives/model.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/platforms/web/runtime/directives/model.js b/src/platforms/web/runtime/directives/model.js index 3457fc15fe9..aa0e10e64c2 100644 --- a/src/platforms/web/runtime/directives/model.js +++ b/src/platforms/web/runtime/directives/model.js @@ -6,7 +6,7 @@ import { isTextInputType } from 'web/util/element' import { looseEqual, looseIndexOf } from 'shared/util' import { mergeVNodeHook } from 'core/vdom/helpers/index' -import { warn, isIE9, isIE, isEdge } from 'core/util/index' +import { warn, inBrowser, isIE9, isIE, isEdge } from 'core/util/index' /* istanbul ignore if */ if (isIE9) { @@ -19,6 +19,8 @@ if (isIE9) { }) } +const isCompositionEventSupported = inBrowser && typeof window.CompositionEvent === 'function' + const directive = { inserted (el, binding, vnode, oldVnode) { if (vnode.tag === 'select') { @@ -34,14 +36,14 @@ const directive = { } else if (vnode.tag === 'textarea' || isTextInputType(el.type)) { el._vModifiers = binding.modifiers if (!binding.modifiers.lazy) { - // Safari < 10.2 & UIWebView doesn't fire compositionend when - // switching focus before confirming composition choice - // this also fixes the issue where some browsers e.g. iOS Chrome - // fires "change" instead of "input" on autocomplete. - el.addEventListener('change', onCompositionEnd) - if (typeof window.CompositionEvent === 'function') { + if (isCompositionEventSupported) { el.addEventListener('compositionstart', onCompositionStart) el.addEventListener('compositionend', onCompositionEnd) + // Safari < 10.2 & UIWebView doesn't fire compositionend when + // switching focus before confirming composition choice + // this also fixes the issue where some browsers e.g. iOS Chrome + // fires "change" instead of "input" on autocomplete. + el.addEventListener('change', onCompositionEnd) } /* istanbul ignore if */ if (isIE9) { From cc02ee3d2e4a6e76d69fd73d5c33c44103fe48df Mon Sep 17 00:00:00 2001 From: LeuisKen Date: Fri, 5 Jan 2018 11:51:15 +0800 Subject: [PATCH 4/4] refactor:sync the logic in test file as in src --- test/unit/features/directives/model-text.spec.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/test/unit/features/directives/model-text.spec.js b/test/unit/features/directives/model-text.spec.js index f2746d4a52b..e4ae1dd0107 100644 --- a/test/unit/features/directives/model-text.spec.js +++ b/test/unit/features/directives/model-text.spec.js @@ -1,5 +1,7 @@ import Vue from 'vue' -import { isIE9, isIE } from 'core/util/env' +import { inBrowser, isIE9, isIE } from 'core/util/env' + +const isCompositionEventSupported = inBrowser && typeof window.CompositionEvent === 'function' describe('Directive v-model text', () => { it('should update value both ways', done => { @@ -183,7 +185,7 @@ describe('Directive v-model text', () => { }) } - if (typeof window.CompositionEvent === 'function') { + if (isCompositionEventSupported) { it('compositionevents', function (done) { const vm = new Vue({ data: { @@ -291,7 +293,7 @@ describe('Directive v-model text', () => { expect('conflicts with v-model').not.toHaveBeenWarned() }) - if (!typeof window.CompositionEvent === 'function') { + if (isCompositionEventSupported) { it('does not trigger extra input events with single compositionend', () => { const spy = jasmine.createSpy() const vm = new Vue({