From cbc4e4048a4c2049719388f22f519e2d223eb4fe Mon Sep 17 00:00:00 2001
From: DCloud_LXH <283700113@qq.com>
Date: Wed, 30 Mar 2022 16:32:48 +0800
Subject: [PATCH] feat: input ignoreCompositionEvent

---
 src/core/view/components/input/index.vue      | 25 ++++++++++----
 src/core/view/components/textarea/index.vue   | 33 ++++++++++++-------
 src/core/view/mixins/field.js                 |  4 +++
 .../app-plus/runtime/web-view-api.js          |  2 +-
 4 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/core/view/components/input/index.vue b/src/core/view/components/input/index.vue
index 7279062a8..d65db8b00 100644
--- a/src/core/view/components/input/index.vue
+++ b/src/core/view/components/input/index.vue
@@ -32,6 +32,7 @@
         @input.stop="_onInput"
         @compositionstart.stop="_onComposition"
         @compositionend.stop="_onComposition"
+        @compositionupdate.stop="_onComposition"
         @keyup.enter.stop="_onKeyup"
       >
       <!-- fix: 禁止 readonly 状态获取焦点 -->
@@ -201,7 +202,7 @@ export default {
     _onInput ($event, force) {
       let outOfMaxlength = false
 
-      if (this.composing) {
+      if (this.composing && this.ignoreCompositionEvent) {
         return
       }
 
@@ -241,18 +242,28 @@ export default {
 
       if (outOfMaxlength) return
 
+      if (!this.ignoreCompositionEvent) this.valueSync = this.$refs.input.value
+
       this.$triggerInput($event, {
         value: this.valueSync
       }, force)
     },
     _onComposition ($event) {
-      if ($event.type === 'compositionstart') {
-        this.composing = true
-      } else if (this.composing) {
-        this.composing = false
-        // 部分输入法 compositionend 事件可能晚于 input
-        this._onInput($event)
+      switch ($event.type) {
+        case 'compositionstart':
+          this.composing = true
+          break
+        case 'compositionend':
+          if (this.composing) {
+            this.composing = false
+            // 部分输入法 compositionend 事件可能晚于 input
+            this._onInput($event)
+          }
+          break
       }
+
+      !this.ignoreCompositionEvent &&
+        this.$trigger($event.type, $event, { data: $event.data })
     },
     _resetFormData () {
       this.valueSync = ''
diff --git a/src/core/view/components/textarea/index.vue b/src/core/view/components/textarea/index.vue
index fb182e3da..b6f12ab7d 100644
--- a/src/core/view/components/textarea/index.vue
+++ b/src/core/view/components/textarea/index.vue
@@ -41,8 +41,9 @@
         :enterkeyhint="confirmType"
         class="uni-textarea-textarea"
         @change.stop
-        @compositionstart.stop="_onCompositionstart"
-        @compositionend.stop="_onCompositionend"
+        @compositionstart.stop="_onComposition"
+        @compositionend.stop="_onComposition"
+        @compositionupdate.stop="_onComposition"
         @input.stop="_onInput"
         @focus="_onFocus"
         @blur="_onBlur"
@@ -190,15 +191,22 @@ export default {
         !this.confirmHold && this.$refs.textarea.blur()
       }
     },
-    _onCompositionstart ($event) {
-      this.composing = true
-    },
-    _onCompositionend ($event) {
-      if (this.composing) {
-        this.composing = false
-        // 部分输入法 compositionend 事件可能晚于 input
-        this._onInput($event)
+    _onComposition ($event) {
+      switch ($event.type) {
+        case 'compositionstart':
+          this.composing = true
+          break
+        case 'compositionend':
+          if (this.composing) {
+            this.composing = false
+            // 部分输入法 compositionend 事件可能晚于 input
+            this._onInput($event)
+          }
+          break
       }
+
+      !this.ignoreCompositionEvent &&
+        this.$trigger($event.type, $event, { data: $event.data })
     },
     // 暂无完成按钮，此功能未实现
     _confirm ($event) {
@@ -218,10 +226,13 @@ export default {
       this.height = height
     },
     _onInput ($event, force) {
-      if (this.composing) {
+      if (this.composing && this.ignoreCompositionEvent) {
         this.valueComposition = $event.target.value
         return
       }
+
+      if (!this.ignoreCompositionEvent) this.valueSync = this.$refs.textarea.value
+
       this.$triggerInput($event, {
         value: this.valueSync,
         cursor: this.$refs.textarea.selectionEnd
diff --git a/src/core/view/mixins/field.js b/src/core/view/mixins/field.js
index b3e1273ed..8e6aa8796 100644
--- a/src/core/view/mixins/field.js
+++ b/src/core/view/mixins/field.js
@@ -66,6 +66,10 @@ export default {
     confirmHold: {
       type: Boolean,
       default: false
+    },
+    ignoreCompositionEvent: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
diff --git a/src/platforms/app-plus/runtime/web-view-api.js b/src/platforms/app-plus/runtime/web-view-api.js
index ccb79891f..5cb5217a5 100644
--- a/src/platforms/app-plus/runtime/web-view-api.js
+++ b/src/platforms/app-plus/runtime/web-view-api.js
@@ -3,7 +3,7 @@ const webviewIds = []
 const UNIAPP_SERVICE_NVUE_ID = '__uniapp__service'
 const WEB_INVOKE_APPSERVICE = 'WEB_INVOKE_APPSERVICE'
 
-function isNvue() {
+function isNvue () {
   return (window.__dcloud_weex_postMessage || window.__dcloud_weex_)
 }
 
-- 
GitLab