From f82e178d80b3100526d772bfc955137f4d060a7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=93=E6=99=A8?= <anzixuan168@163.com>
Date: Mon, 22 Jan 2024 19:00:07 +0800
Subject: [PATCH] Fix the bug of textarea with maxlength can't input before
 limit (#3044)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(textarea.tsx): 修复textarea在折叠面板内时，高度计算不正确，会出现滚动条的问题

修复用户反馈issue"[Textarea]
textarea在折叠面板内时，高度计算不正确，会出现滚动条",issue详情见:https://github.com/Tencent/tdesign-vue/issues/2809

* fix(textarea.tsx): fixed the bug where textarea with maxlength can't input before limit

用户提出issue,反馈设置maxlength后，windows自带输入法，当输入中文时所输入字符还没有达到最大长度也会没法输入.
---
 src/textarea/textarea.tsx | 47 ++++++++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/textarea/textarea.tsx b/src/textarea/textarea.tsx
index bcadcc4a5..1cb0b6a62 100644
--- a/src/textarea/textarea.tsx
+++ b/src/textarea/textarea.tsx
@@ -123,18 +123,20 @@ export default mixins(Vue as VueConstructor<Textarea>, classPrefixMixins).extend
 
   methods: {
     adjustTextareaHeight() {
-      if (!this.$refs.refTextareaElem) return;
-      if (this.autosize === true) {
-        this.textareaStyle = calcTextareaHeight(this.$refs.refTextareaElem as HTMLTextAreaElement);
-      } else if (this.autosize && typeof this.autosize === 'object') {
-        this.textareaStyle = calcTextareaHeight(
-          this.$refs.refTextareaElem as HTMLTextAreaElement,
-          this.autosize?.minRows,
-          this.autosize?.maxRows,
-        );
-      } else if (this.$attrs.rows) {
-        this.textareaStyle = { height: 'auto', minHeight: 'auto' };
-      }
+      this.$nextTick(() => {
+        if (!this.$refs.refTextareaElem) return;
+        if (this.autosize === true) {
+          this.textareaStyle = calcTextareaHeight(this.$refs.refTextareaElem as HTMLTextAreaElement);
+        } else if (this.autosize && typeof this.autosize === 'object') {
+          this.textareaStyle = calcTextareaHeight(
+            this.$refs.refTextareaElem as HTMLTextAreaElement,
+            this.autosize?.minRows,
+            this.autosize?.maxRows,
+          );
+        } else if (this.$attrs.rows) {
+          this.textareaStyle = { height: 'auto', minHeight: 'auto' };
+        }
+      });
     },
     /**
      * Provide a method to calculate the height of textArea component after DOM mounted
@@ -168,16 +170,21 @@ export default mixins(Vue as VueConstructor<Textarea>, classPrefixMixins).extend
     inputValueChangeHandle(e: InputEvent) {
       const { target } = e;
       let val = (target as HTMLInputElement).value;
-      if (this.maxlength) {
-        val = limitUnicodeMaxLength(val, Number(this.maxlength));
-      }
-      if (this.maxcharacter && this.maxcharacter >= 0) {
-        const stringInfo = getCharacterLength(val, this.maxcharacter);
-        val = typeof stringInfo === 'object' && stringInfo.characters;
+      if (!this.isComposing) {
+        if (this.maxlength) {
+          val = limitUnicodeMaxLength(val, Number(this.maxlength));
+        }
+        if (this.maxcharacter && this.maxcharacter >= 0) {
+          const stringInfo = getCharacterLength(val, this.maxcharacter);
+          val = typeof stringInfo === 'object' && stringInfo.characters;
+        }
       }
+
       this.$emit('input', val);
-      // 中文输入时不触发 onChange
-      !this.isComposing && this.emitEvent('change', val, { e });
+      // 中文输入结束才触发 onChange
+      if (!this.isComposing) {
+        this.emitEvent('change', val, { e });
+      }
 
       this.$nextTick(() => this.setInputValue(val));
       this.adjustTextareaHeight();