From 4a42c6c162e2d0b4f0c45fcc9084e2537ee008ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Thu, 3 Nov 2022 22:33:53 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(textarea):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=8B=BC=E5=AD=97=E9=98=B6=E6=AE=B5=E8=A7=A6=E5=8F=91=20update?=
 =?UTF-8?q?:modelValue=20=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/src/component/select/index.vue  |  2 +-
 package/component/src/component/tab/index.vue |  4 ++--
 .../src/component/textarea/index.vue          | 19 +++++++++++++++++--
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/package/component/src/component/select/index.vue b/package/component/src/component/select/index.vue
index 1a8462c3..0b3646c6 100644
--- a/package/component/src/component/select/index.vue
+++ b/package/component/src/component/select/index.vue
@@ -73,7 +73,7 @@ var timer: any;
 const getOption = (nodes: VNode[], newOptions: any[]) => {
   nodes?.map((item) => {
     let component = item.type as Component;
-    if(item.type.toString() == "Symbol(Fragment)") {
+    if (item.type.toString() == "Symbol(Fragment)") {
       getOption(item.children as VNode[], newOptions);
     } else {
       if (component.name == LaySelectOption.name) {
diff --git a/package/component/src/component/tab/index.vue b/package/component/src/component/tab/index.vue
index 19af79a6..045f8017 100644
--- a/package/component/src/component/tab/index.vue
+++ b/package/component/src/component/tab/index.vue
@@ -25,7 +25,7 @@ import {
   reactive,
   h,
   createTextVNode,
-  Fragment
+  Fragment,
 } from "vue";
 import { useResizeObserver } from "@vueuse/core";
 import { TabData, TabInjectKey, TabPosition } from "./interface";
@@ -47,7 +47,7 @@ const tabMap = reactive(new Map<number, TabData>());
 const setItemInstanceBySlot = function (nodes: VNode[]) {
   nodes?.map((item) => {
     let component = item.type as Component;
-    if(item.type.toString() == "Symbol(Fragment)") {
+    if (item.type.toString() == "Symbol(Fragment)") {
       setItemInstanceBySlot(item.children as VNode[]);
     } else {
       if (component.name == tabItem.name) {
diff --git a/package/component/src/component/textarea/index.vue b/package/component/src/component/textarea/index.vue
index 124eb07f..b8d509c6 100644
--- a/package/component/src/component/textarea/index.vue
+++ b/package/component/src/component/textarea/index.vue
@@ -6,7 +6,7 @@ export default {
 
 <script setup lang="ts">
 import { LayIcon } from "@layui/icons-vue";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import "./index.less";
 
 export interface TextareaProps {
@@ -31,11 +31,15 @@ interface TextareaEmits {
 }
 
 const emit = defineEmits<TextareaEmits>();
+const composing = ref(false);
 
 const onInput = function (event: Event) {
   const inputElement = event.target as HTMLInputElement;
-  emit("update:modelValue", inputElement.value);
   emit("input", inputElement.value);
+  if (composing.value) {
+    return;
+  }
+  emit("update:modelValue", inputElement.value);
 };
 
 const onFocus = function (event: Event) {
@@ -56,6 +60,15 @@ const onClear = function () {
   emit("clear");
 };
 
+const onCompositionstart = () => {
+  composing.value = true;
+};
+
+const onCompositionend = (event: Event) => {
+  composing.value = false;
+  onInput(event);
+};
+
 const hasContent = computed(() => (props.modelValue as string)?.length > 0);
 
 const wordCount = computed(() => {
@@ -77,6 +90,8 @@ const wordCount = computed(() => {
       :disabled="disabled"
       :maxlength="maxlength"
       :class="{ 'layui-textarea-disabled': disabled }"
+      @compositionstart="onCompositionstart"
+      @compositionend="onCompositionend"
       @input="onInput"
       @focus="onFocus"
       @change="onChange"