From e1e2cf2878f5c911f6c2cba8df2503388f975552 Mon Sep 17 00:00:00 2001
From: zjh0326 <1286638188@qq.com>
Date: Fri, 3 Jul 2026 17:27:28 +0800
Subject: [PATCH 1/2] feat(Textarea): add clearable prop to support clearing
 content

- Add clearable prop to Textarea component
- Display clear button when clearable=true and value is not empty
- Click to clear input content
- Support dark mode with CSS variables
- Add example in _example/base.vue

Close #2566
---
 .../components/textarea/_example/base.vue     |  3 +
 packages/components/textarea/props.ts         |  5 ++
 packages/components/textarea/textarea.tsx     | 64 +++++++++++++++++++
 packages/components/textarea/type.ts          |  5 ++
 4 files changed, 77 insertions(+)

diff --git a/packages/components/textarea/_example/base.vue b/packages/components/textarea/_example/base.vue
index 866d09b313..1f6e5c8a64 100644
--- a/packages/components/textarea/_example/base.vue
+++ b/packages/components/textarea/_example/base.vue
@@ -15,6 +15,8 @@
       name="description"
       :autosize="{ minRows: 3, maxRows: 5 }"
     />
+
+    <t-textarea v-model="value4" placeholder="可清空的文本框" name="description" clearable />
   </t-space>
 </template>
 <script lang="ts" setup>
@@ -24,6 +26,7 @@ import type { TextareaProps } from 'tdesign-vue-next';
 const value = ref('');
 const value2 = ref('');
 const value3 = ref('');
+const value4 = ref('这是测试内容，可以点击右侧的清空按钮来清空');
 const onChange: TextareaProps['onChange'] = (value, e) => {
   console.log('onChange：', value, e);
 };
diff --git a/packages/components/textarea/props.ts b/packages/components/textarea/props.ts
index 1b8f49e089..fab336c217 100644
--- a/packages/components/textarea/props.ts
+++ b/packages/components/textarea/props.ts
@@ -54,6 +54,11 @@ export default {
       return ['default', 'success', 'warning', 'error'].includes(val);
     },
   },
+  /** 是否可清空 */
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
   /** 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 */
   tips: {
     type: [String, Function] as PropType<TdTextareaProps['tips']>,
diff --git a/packages/components/textarea/textarea.tsx b/packages/components/textarea/textarea.tsx
index dd8574c38e..d8880789b0 100644
--- a/packages/components/textarea/textarea.tsx
+++ b/packages/components/textarea/textarea.tsx
@@ -5,6 +5,7 @@ import {
   ref,
   nextTick,
   onMounted,
+  onUpdated,
   toRefs,
   inject,
   StyleValue,
@@ -227,6 +228,13 @@ export default defineComponent({
         onKeypress: emitKeypress,
       });
       const { STATUS } = useCommonClassName();
+      const textareaClasses = computed(() => [
+        `${name.value}`,
+        {
+          [`${name.value}--clearable`]: props.clearable,
+        },
+      ]);
+
       const classes = computed(() => [
         `${name.value}__inner`,
         {
@@ -254,6 +262,61 @@ export default defineComponent({
           }`}</span>
         ));
 
+      // 清空按钮 - 使用CSS变量适配白天/夜间模式
+      const clearIcon =
+        props.clearable && innerValue.value ? (
+          <span
+            onClick={(e: any) => {
+              e.stopPropagation();
+              setInnerValue('');
+            }}
+            onMouseenter={(e: any) => {
+              (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--td-bg-color-container-hover)';
+              (e.currentTarget as HTMLElement).style.color = 'var(--td-brand-color)';
+            }}
+            onMouseleave={(e: any) => {
+              (e.currentTarget as HTMLElement).style.backgroundColor = 'transparent';
+              (e.currentTarget as HTMLElement).style.color = 'var(--td-text-color-secondary)';
+              (e.currentTarget as HTMLElement).style.transform = '';
+            }}
+            onMousedown={(e: any) => {
+              (e.currentTarget as HTMLElement).style.transform = 'scale(0.85)';
+              (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--td-bg-color-container-active)';
+            }}
+            onMouseup={(e: any) => {
+              (e.currentTarget as HTMLElement).style.transform = '';
+              (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--td-bg-color-container-hover)';
+            }}
+            title="清空内容"
+            style={{
+              position: 'absolute',
+              top: '8px',
+              right: '8px',
+              zIndex: '10',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '32px',
+              height: '32px',
+              cursor: 'pointer',
+              borderRadius: '50%',
+              backgroundColor: 'transparent',
+              transition: 'all 0.2s ease',
+              color: 'var(--td-text-color-secondary)',
+            }}
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M11 5L5 11M5 5L11 11"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </span>
+        ) : null;
+
       return (
         <div class={textareaClasses.value} {...omit(attrs, ['style'])}>
           <textarea
@@ -266,6 +329,7 @@ export default defineComponent({
             {...inputEvents}
             {...inputAttrs.value}
           ></textarea>
+          {clearIcon}
           {textTips || limitText ? (
             <div
               class={[
diff --git a/packages/components/textarea/type.ts b/packages/components/textarea/type.ts
index aabb06bc87..8748f5892f 100644
--- a/packages/components/textarea/type.ts
+++ b/packages/components/textarea/type.ts
@@ -52,6 +52,11 @@ export interface TdTextareaProps {
    * @default default
    */
   status?: 'default' | 'success' | 'warning' | 'error';
+  /**
+   * 是否可清空
+   * @default false
+   */
+  clearable?: boolean;
   /**
    * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
    */

From f5fd9750de2fb36d1f1bdf8150d436c7215fbe7f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 29 Jul 2026 10:27:51 +0000
Subject: [PATCH 2/2] chore: update common to PR 2608

---
 packages/common | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/common b/packages/common
index 5aedfdf7ab..ae4448b30b 160000
--- a/packages/common
+++ b/packages/common
@@ -1 +1 @@
-Subproject commit 5aedfdf7ab0457141b0a886d2126e22bbdb42cae
+Subproject commit ae4448b30b1fac2a2396ae48cbe59772e32cba71