Merge pull request #38101 from ant-design/fix/input-textarea-border

style: fix TextArea custom border style not working when allowClear is enable

components/input/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -5083,6 +5083,34 @@ exports[`renders ./components/input/demo/borderless-debug.md extend context corr
       RMB
     </span>
   </span>
+  <span
+    class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
+    style="border:2px solid #000"
+  >
+    <textarea
+      class="ant-input"
+    />
+    <span
+      aria-label="close-circle"
+      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+      role="button"
+      tabindex="-1"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="close-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 

components/input/__tests__/__snapshots__/demo.test.ts.snap

@@ -1300,6 +1300,34 @@ exports[`renders ./components/input/demo/borderless-debug.md correctly 1`] = `
       RMB
     </span>
   </span>
+  <span
+    class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
+    style="border:2px solid #000"
+  >
+    <textarea
+      class="ant-input"
+    />
+    <span
+      aria-label="close-circle"
+      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+      role="button"
+      tabindex="-1"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="close-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 

components/input/demo/borderless-debug.md

@@ -1,14 +1,14 @@
 ---
 order: 98
 title:
-  zh-CN: Borderless Debug
+  zh-CN: Style Debug
-  en-US: Borderless Debug
+  en-US: Style Debug
 debug: true
 ---
 
 ## zh-CN
 
-Buggy!
+Buggy! 测试一些踩过的样式坑。
 
 ## en-US
 
@@ -29,6 +29,7 @@ const App: React.FC = () => (
     <Input placeholder="Unbordered" bordered={false} allowClear />
     <Input prefix="￥" suffix="RMB" bordered={false} />
     <Input prefix="￥" suffix="RMB" disabled bordered={false} />
+    <TextArea allowClear style={{ border: '2px solid #000' }} />
   </div>
 );
 

components/input/style/affix.less

@@ -28,8 +28,7 @@
       }
     }
 
-    > input.@{ant-prefix}-input {
+    > .@{ant-prefix}-input {
-      padding: 0;
       font-size: inherit;
       border: none;
       outline: none;
@@ -37,6 +36,10 @@
       &:focus {
         box-shadow: none !important;
       }
+
+      &:not(textarea) {
+        padding: 0;
+      }
     }
 
     &::before {

components/input/style/allow-clear.less

@@ -2,8 +2,8 @@
 @input-prefix-cls: ~'@{ant-prefix}-input';
 
 // ========================= Input =========================
-.@{iconfont-css-prefix}.@{ant-prefix}-input-clear-icon,
+.@{iconfont-css-prefix}.@{input-prefix-cls}-clear-icon,
-.@{ant-prefix}-input-clear-icon {
+.@{input-prefix-cls}-clear-icon {
   margin: 0;
   color: @disabled-color;
   font-size: @font-size-sm;
@@ -31,11 +31,10 @@
 }
 
 // ======================= TextArea ========================
-.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
+.@{input-prefix-cls}-affix-wrapper.@{input-prefix-cls}-affix-wrapper-textarea-with-clear-btn {
-  padding: 0 !important;
+  padding: 0;
-  border: 0 !important;
 
-  .@{ant-prefix}-input-clear-icon {
+  .@{input-prefix-cls}-clear-icon {
     position: absolute;
     top: 8px;
     right: 8px;