From 505f555321cb0dfb8563f12d0ffe79943b97affe Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Tue, 27 Jun 2023 16:30:32 +0800
Subject: [PATCH] fix(Textarea): resolved indicator error (#902)

* fix(Textarea): resolved indicator error

* test: update unit case
---
 src/textarea/__test__/index.test.jsx |  6 ++++--
 src/textarea/demos/maxcharacter.vue  | 15 ++++++---------
 src/textarea/demos/maxlength.vue     | 15 ++++++---------
 src/textarea/textarea.vue            | 16 ++++++++--------
 4 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/src/textarea/__test__/index.test.jsx b/src/textarea/__test__/index.test.jsx
index fbc2d6caf..841b8617e 100644
--- a/src/textarea/__test__/index.test.jsx
+++ b/src/textarea/__test__/index.test.jsx
@@ -25,9 +25,10 @@ describe('Textarea.vue', () => {
     const wrapper = mount(
       <Textarea label="标题" v-model={value.value} maxcharacter={maxcharacter} onChange={onChange} />,
     );
+    expect(onChange).toBeCalledTimes(1);
     const el = wrapper.find('textarea').element;
     await simulateEvent(el, '一个汉字等于两个字符，超出会被剪切', 'input');
-    expect(onChange).toBeCalledTimes(1);
+    expect(onChange).toBeCalledTimes(2);
     expect(onChange).toHaveBeenCalledWith('一');
   });
 
@@ -35,9 +36,10 @@ describe('Textarea.vue', () => {
     const value = ref('');
     const onChange = vi.fn();
     const wrapper = mount(<Textarea label="标题" v-model={value.value} autosize onChange={onChange} />);
+    expect(onChange).toBeCalledTimes(1);
     const el = wrapper.find('textarea').element;
     await simulateEvent(el, '这里是一段很长很长很长的长文本，支持自动换行', 'input');
-    expect(onChange).toBeCalledTimes(1);
+    expect(onChange).toBeCalledTimes(2);
   });
 
   it(': placeholder', async () => {
diff --git a/src/textarea/demos/maxcharacter.vue b/src/textarea/demos/maxcharacter.vue
index 944910455..d0d49c483 100644
--- a/src/textarea/demos/maxcharacter.vue
+++ b/src/textarea/demos/maxcharacter.vue
@@ -1,11 +1,8 @@
 <template>
-  <t-textarea
-    name="标签文字"
-    label="标签文字"
-    placeholder="请输入文字"
-    :maxcharacter="500"
-    indicator
-    :allow-input-over-max="true"
-  />
+  <t-textarea v-model="value" name="标签文字" label="标签文字" placeholder="请输入文字" :maxcharacter="500" indicator />
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('');
+</script>
diff --git a/src/textarea/demos/maxlength.vue b/src/textarea/demos/maxlength.vue
index 94ec5f0c1..7b610c579 100644
--- a/src/textarea/demos/maxlength.vue
+++ b/src/textarea/demos/maxlength.vue
@@ -1,11 +1,8 @@
 <template>
-  <t-textarea
-    name="标签文字"
-    label="标签文字"
-    placeholder="请输入文字"
-    :maxlength="500"
-    indicator
-    :allow-input-over-max="true"
-  />
+  <t-textarea v-model="value" name="标签文字" label="标签文字" placeholder="请输入文字" :maxlength="500" indicator />
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('');
+</script>
diff --git a/src/textarea/textarea.vue b/src/textarea/textarea.vue
index 044205d25..07ada656f 100644
--- a/src/textarea/textarea.vue
+++ b/src/textarea/textarea.vue
@@ -94,34 +94,33 @@ export default defineComponent({
 
     const handleInput = (e: any) => {
       if (e.isComposing || e.inputType === 'insertCompositionText') return;
-      textareaValueChangeHandle(e);
+      textareaValueChangeHandle();
     };
 
-    const textareaValueChangeHandle = (e: InputEvent) => {
-      const { target } = e;
-      const { value } = target as HTMLInputElement;
+    const textareaValueChangeHandle = () => {
+      const textarea = textareaRef.value as HTMLInputElement;
       if (
         !props.allowInputOverMax &&
         props.maxcharacter &&
         props.maxcharacter > 0 &&
         !Number.isNaN(props.maxcharacter)
       ) {
-        const { length = 0, characters = '' } = getCharacterLength(value, props.maxcharacter) as {
+        const { length = 0, characters = '' } = getCharacterLength(textarea.value, props.maxcharacter) as {
           length: number;
           characters: string;
         };
         setInnerValue(characters);
         textareaLength.value = length;
       } else {
-        setInnerValue(value);
-        textareaLength.value = String(innerValue.value).length;
+        setInnerValue(textarea.value);
+        textareaLength.value = String(textarea.value).length;
       }
       nextTick(() => setInputValue(innerValue.value));
       adjustTextareaHeight();
     };
 
     const handleCompositionend = (e: InputEvent | CompositionEvent) => {
-      textareaValueChangeHandle(e as InputEvent);
+      textareaValueChangeHandle();
     };
 
     const handleFocus = (e: FocusEvent) => {
@@ -135,6 +134,7 @@ export default defineComponent({
       if (props.autofocus) {
         textareaRef.value?.focus();
       }
+      textareaValueChangeHandle();
       adjustTextareaHeight();
     });