From e7510585ab68101cbc1a95e5c04f08cbb19be2a3 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 18 Sep 2020 22:18:15 +0800
Subject: [PATCH] fix(Field): input composing #7035

---
 src/field/index.js     | 25 ++++++++++++++++---------
 src/utils/dom/event.ts |  6 ++++++
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/field/index.js b/src/field/index.js
index 4b28c58e5..5b69a8466 100644
--- a/src/field/index.js
+++ b/src/field/index.js
@@ -1,7 +1,7 @@
 // Utils
 import { resetScroll } from '../utils/dom/reset-scroll';
 import { formatNumber } from '../utils/format/number';
-import { preventDefault } from '../utils/dom/event';
+import { trigger, preventDefault } from '../utils/dom/event';
 import {
   isDef,
   addUnit,
@@ -386,6 +386,18 @@ export default createComponent({
       this.$emit('keypress', event);
     },
 
+    onCompositionStart(event) {
+      event.target.composing = true;
+    },
+
+    onCompositionEnd(event) {
+      const { target } = event;
+      if (target.composing) {
+        target.composing = false;
+        trigger(target, 'input');
+      }
+    },
+
     adjustSize() {
       const { input } = this.$refs;
       if (!(this.type === 'textarea' && this.autosize) || !input) {
@@ -439,15 +451,10 @@ export default createComponent({
         onFocus: this.onFocus,
         onInput: this.onInput,
         onClick: this.onClickInput,
+        onChange: this.onCompositionEnd,
         onKeypress: this.onKeypress,
-        // TODO
-        // add model directive to skip IME composition
-        // directives: [
-        //   {
-        //     name: 'model',
-        //     value: this.modelValue,
-        //   },
-        // ],
+        onCompositionend: this.onCompositionEnd,
+        onCompositionstart: this.onCompositionStart,
       };
 
       if (type === 'textarea') {
diff --git a/src/utils/dom/event.ts b/src/utils/dom/event.ts
index f65745cc7..322247318 100644
--- a/src/utils/dom/event.ts
+++ b/src/utils/dom/event.ts
@@ -56,3 +56,9 @@ export function preventDefault(event: Event, isStopPropagation?: boolean) {
     stopPropagation(event);
   }
 }
+
+export function trigger(target: Element, type: string) {
+  const inputEvent = document.createEvent('HTMLEvents');
+  inputEvent.initEvent(type, true, true);
+  target.dispatchEvent(inputEvent);
+}