fix: 🐛 修复textarea在支付宝小程序上清除按钮点击热区失效的问题

Author: Moonofweisheng

src/uni_modules/wot-design-uni/components/wd-textarea/index.scss

@@ -135,7 +135,6 @@
 
   @include e(suffix) {
     flex-shrink: 0;
-    margin-left: $-textarea-icon-margin;
     line-height: initial;
   }
 
@@ -144,10 +143,16 @@
     padding: 0;
     font-size: 0;
     background: $-textarea-bg;
+    padding-right: 24px;
+    box-sizing: border-box;
 
     @include when(show-limit) {
       padding-bottom: 36px;
     }
+
+    @include when(suffix) {
+      padding-right: calc($-textarea-icon-size + 8px);
+    }
   }
 
 
@@ -167,14 +172,11 @@
     &::-webkit-input-placeholder {
       color: $-input-placeholder-color;
     }
-
-    @include when(suffix) {
-      padding-right: calc($-textarea-icon-size + 8px);
-    }
   }
 
   @include e(suffix) {
     position: absolute;
+    z-index: 1;
     right: 0;
     top: 0;
     bottom: 0;
@@ -185,8 +187,6 @@
     font-size: $-textarea-icon-size;
     color: $-textarea-icon-color;
     background: $-textarea-bg;
-    // vertical-align: middle;
-    // line-height: $-cell-line-height;
   }
 
   @include edeep(clear) {
@@ -312,11 +312,6 @@
       display: none;
     }
 
-
-    .wd-textarea__inner {
-      padding-right: 24px;
-    }
-
     .wd-textarea__suffix {
       right: 0;
     }

src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="rootClass" :style="customStyle" @click="handleClick">
+  <view :class="rootClass" :style="customStyle">
     <view v-if="label || useLabelSlot" :class="labelClass" :style="labelStyle">
       <view v-if="prefixIcon || usePrefixSlot" class="wd-textarea__prefix">
         <wd-icon v-if="prefixIcon && !usePrefixSlot" custom-class="wd-textarea__icon" :name="prefixIcon" @click="onClickPrefixIcon" />
@@ -12,9 +12,9 @@
     </view>
 
     <!-- 文本域 -->
-    <view :class="`wd-textarea__value ${customTextareaContainerClass} ${showWordCount ? 'is-show-limit' : ''}`">
+    <view :class="`wd-textarea__value ${showClear ? 'is-suffix' : ''} ${customTextareaContainerClass} ${showWordCount ? 'is-show-limit' : ''}`">
       <textarea
-        :class="`wd-textarea__inner ${showClear ? 'is-suffix' : ''} ${customTextareaClass}`"
+        :class="`wd-textarea__inner ${customTextareaClass}`"
         v-model="inputValue"
         :show-count="false"
         :placeholder="placeholder || translate('placeholder')"
@@ -212,12 +212,15 @@ function clear() {
     .then(() => requestAnimationFrame())
     .then(() => requestAnimationFrame())
     .then(() => {
-      isFocus.value = true
       emit('change', {
         value: ''
       })
       emit('update:modelValue', inputValue.value)
       emit('clear')
+
+      requestAnimationFrame().then(() => {
+        isFocus.value = true
+      })
     })
 }
 // 失去焦点时会先后触发change、blur，未输入内容但失焦不触发 change 只触发 blur