fix: input not trigger change compositionStart

Author: tangjinzhou

antdv-demo

@@ -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;

components/_util/antInputDirective.js

@@ -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 <input {...inputProps} />;
+      return withDirectives(<input {...inputProps} />, [[antInputDirective]]);
     },
     clearPasswordValueAttribute() {
       // https://github.com/ant-design/ant-design/issues/20541

components/input/Input.jsx

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/form/demo';
+import demo from '../antdv-demo/docs/input/demo/basic.md';
 export default {
   components: {
     demo,