From 9fff7227b5c509f52631d935bdcee3fab12842fe Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Wed, 6 Dec 2023 19:12:49 +0800
Subject: [PATCH] feat(input): enable props clear-trigger (#2372)

* feat(input): enable props clear-trigger

* perf(input): enable props clear-trigger

* Update README.md

---------

Co-authored-by: Y <anly_yaw@163.com>
---
 src/input/README.en-US.md |  1 +
 src/input/README.md       |  1 +
 src/input/input.ts        | 11 +++++++++++
 src/input/input.wxml      |  2 +-
 src/input/props.ts        |  5 +++++
 src/input/type.ts         |  8 ++++++++
 6 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/input/README.en-US.md b/src/input/README.en-US.md
index eb3fe493f..ebe362043 100644
--- a/src/input/README.en-US.md
+++ b/src/input/README.en-US.md
@@ -10,6 +10,7 @@ align | String | left | options：left/center/right | N
 layout | String | horizontal | options：vertical/horizontal | N
 borderless | Boolean | true | \- | N
 clearable | Boolean | false | \- | N
+clear-trigger | String | always | options：always / focus | N
 disabled | Boolean | - | \- | N
 error-message | String | - | `deprecated` | N
 external-classes | Array | - | `['t-class', 't-class-input', 't-class-placeholder', 't-class-error-msg']` | N
diff --git a/src/input/README.md b/src/input/README.md
index 0982d17b7..645b26223 100644
--- a/src/input/README.md
+++ b/src/input/README.md
@@ -82,6 +82,7 @@ align | String | left | 文本内容位置，居左/居中/居右。可选项：
 layout | String | horizontal | 标题输入框布局方式。可选项：vertical/horizontal | N
 borderless | Boolean | false | 是否开启无边框模式 | N
 clearable | Boolean / Object | false | 是否可清空，默认不启动。值为 `true` 表示使用默认清除空按钮，值为 `Object` 表示透传至 `icon` | N
+clear-trigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
 disabled | Boolean | false | 是否禁用输入框 | N
 error-message | String | - | 已废弃。错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips） | N
 format | Function | - | 【开发中】指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => number | string`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
diff --git a/src/input/input.ts b/src/input/input.ts
index 76689a5de..2ea57488e 100644
--- a/src/input/input.ts
+++ b/src/input/input.ts
@@ -32,6 +32,7 @@ export default class Input extends SuperComponent {
     classPrefix: name,
     classBasePrefix: prefix,
     excludeType: ['number', 'digit'],
+    showClearIcon: true,
   };
 
   lifetimes = {
@@ -59,6 +60,10 @@ export default class Input extends SuperComponent {
         _clearIcon: calcIcon(v, 'close-circle-filled'),
       });
     },
+
+    clearTrigger() {
+      this.updateClearIconVisible();
+    },
   };
 
   methods = {
@@ -84,15 +89,21 @@ export default class Input extends SuperComponent {
         });
       }
     },
+    updateClearIconVisible(value: boolean = false) {
+      const { clearTrigger } = this.properties;
+      this.setData({ showClearIcon: value || clearTrigger === 'always' });
+    },
     onInput(e) {
       const { value, cursor, keyCode } = e.detail;
       this.updateValue(value);
       this.triggerEvent('change', { value: this.data.value, cursor, keyCode });
     },
     onFocus(e) {
+      this.updateClearIconVisible(true);
       this.triggerEvent('focus', e.detail);
     },
     onBlur(e) {
+      this.updateClearIconVisible();
       this.triggerEvent('blur', e.detail);
     },
     onConfirm(e) {
diff --git a/src/input/input.wxml b/src/input/input.wxml
index 2313a21a2..6f4e87c76 100644
--- a/src/input/input.wxml
+++ b/src/input/input.wxml
@@ -68,7 +68,7 @@
           安卓不会播报aria-label，会播报aria-roledescription的内容
         -->
       <view
-        wx:if="{{_clearIcon && value.length > 0}}"
+        wx:if="{{_clearIcon && value.length > 0 && showClearIcon}}"
         class="{{classPrefix}}__wrap--clearable-icon"
         bind:touchstart="clearInput"
       >
diff --git a/src/input/props.ts b/src/input/props.ts
index 61a6c00a8..b68180e9f 100644
--- a/src/input/props.ts
+++ b/src/input/props.ts
@@ -26,6 +26,11 @@ const props: TdInputProps = {
     type: null,
     value: false,
   },
+  /** 清空图标触发方式 */
+  clearTrigger: {
+    type: String,
+    value: 'always',
+  },
   /** 是否禁用输入框 */
   disabled: {
     type: Boolean,
diff --git a/src/input/type.ts b/src/input/type.ts
index d379aee32..d8693e844 100644
--- a/src/input/type.ts
+++ b/src/input/type.ts
@@ -37,6 +37,14 @@ export interface TdInputProps {
     type: null;
     value?: boolean | object;
   };
+  /**
+   * 清空图标触发方式
+   * @default always
+   */
+  clearTrigger?: {
+    type: StringConstructor;
+    value?: 'always' | 'focus';
+  };
   /**
    * 自定义组件样式
    * @default ''