diff --git a/antdv-demo b/antdv-demo index c5cc76b99..a24eac222 160000 --- a/antdv-demo +++ b/antdv-demo @@ -1 +1 @@ -Subproject commit c5cc76b99aef8ba929575b6e0f7db82873ac3058 +Subproject commit a24eac222a88e0c8fecfa739b07656e7e5b82a15 diff --git a/components/_util/antInputDirective.js b/components/_util/antInputDirective.js index f07fd01ab..c8ccf2d58 100644 --- a/components/_util/antInputDirective.js +++ b/components/_util/antInputDirective.js @@ -1,21 +1,3 @@ -/** - * Not type checking this file because flow doesn't like attaching - * properties to Elements. - */ - -export const inBrowser = typeof window !== 'undefined'; -export const UA = inBrowser && window.navigator.userAgent.toLowerCase(); -export const isIE9 = UA && UA.indexOf('msie 9.0') > 0; -function makeMap(str, expectsLowerCase) { - const map = Object.create(null); - const list = str.split(','); - for (let i = 0; i < list.length; i++) { - map[list[i]] = true; - } - return expectsLowerCase ? val => map[val.toLowerCase()] : val => map[val]; -} -const isTextInputType = makeMap('text,number,password,search,email,tel,url'); - function onCompositionStart(e) { e.target.composing = true; } @@ -33,40 +15,21 @@ function trigger(el, type) { el.dispatchEvent(e); } -/* istanbul ignore if */ -if (isIE9) { - // http://www.matts411.com/post/internet-explorer-9-oninput/ - document.addEventListener('selectionchange', () => { - const el = document.activeElement; - if (el && el.vmodel) { - trigger(el, 'input'); - } - }); +export function addEventListener(el, event, handler, options) { + el.addEventListener(event, handler, options); } - -export const antInput = { - mounted(el, binding, vnode) { - if (vnode.type === 'textarea' || isTextInputType(el.type)) { - if (!binding.modifiers || !binding.modifiers.lazy) { - 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) { - el.vmodel = true; - } - } +const antInput = { + created(el, binding) { + if (!binding.modifiers || !binding.modifiers.lazy) { + addEventListener(el, 'compositionstart', onCompositionStart); + addEventListener(el, '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. + addEventListener(el, 'change', onCompositionEnd); } }, }; -export default { - install: app => { - antInput(app); - app.directive('ant-input', antInput); - }, -}; +export default antInput; diff --git a/components/input/Input.jsx b/components/input/Input.jsx index 1dc080a69..f81c06c37 100644 --- a/components/input/Input.jsx +++ b/components/input/Input.jsx @@ -1,4 +1,5 @@ -import { inject } from 'vue'; +import { inject, withDirectives } from 'vue'; +import antInputDirective from '../_util/antInputDirective'; import classNames from '../_util/classNames'; import omit from 'omit.js'; import inputProps from './inputProps'; @@ -164,7 +165,7 @@ export default { if (!inputProps.autofocus) { delete inputProps.autofocus; } - return ; + return withDirectives(, [[antInputDirective]]); }, clearPasswordValueAttribute() { // https://github.com/ant-design/ant-design/issues/20541 diff --git a/examples/App.vue b/examples/App.vue index 726982a32..0f02c1ac0 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -4,7 +4,7 @@