From c4f668b40218cc2ae4f6db19d59f644a150a5e38 Mon Sep 17 00:00:00 2001
From: zkwolf <chenhao5866@gmail.com>
Date: Thu, 17 Oct 2019 03:52:10 -0700
Subject: [PATCH] fix: input clear style (#1297)

---
 components/input/Input.jsx               |  4 ++--
 components/input/__tests__/index.test.js |  8 ++++++++
 components/input/style/index.less        | 23 +++++++++++++++++++++++
 components/input/style/mixin.less        |  2 ++
 4 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index aa7ed1c70..cfa91549d 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -121,9 +121,9 @@ export default {
     },
 
     renderClearIcon(prefixCls) {
-      const { allowClear } = this.$props;
+      const { allowClear, disabled } = this.$props;
       const { stateValue } = this;
-      if (!allowClear || stateValue === undefined || stateValue === null || stateValue === '') {
+      if (!allowClear || disabled || stateValue === undefined || stateValue === null || stateValue === '') {
         return null;
       }
       return (
diff --git a/components/input/__tests__/index.test.js b/components/input/__tests__/index.test.js
index 00837b58a..72d511079 100644
--- a/components/input/__tests__/index.test.js
+++ b/components/input/__tests__/index.test.js
@@ -19,6 +19,14 @@ describe('Input', () => {
     const wrapper = mount(Input);
     wrapper.vm.select();
   });
+
+  it('should not support allowClear when it is disabled', () => {
+    const wrapper = mount(Input, {
+      propsData: { allowClear: true, defaultValue: '111', disabled: true },
+      sync: false,
+    });
+    expect(wrapper.findAll('.ant-input-clear-icon').length).toBe(0);
+  });
 });
 
 focusTest(TextArea);
diff --git a/components/input/style/index.less b/components/input/style/index.less
index 390a7e39f..53fd3f0e9 100644
--- a/components/input/style/index.less
+++ b/components/input/style/index.less
@@ -39,4 +39,27 @@
   }
 }
 
+// fix style #1296, remove annotation when upgrade ant-design version > 3.21.3
+.@{ant-prefix}-input-clear-icon {
+  color: @disabled-color;
+  font-size: @font-size-sm;
+  // https://github.com/ant-design/ant-design/pull/18151
+  // https://codesandbox.io/s/wizardly-sun-u10br
+  vertical-align: 0;
+  cursor: pointer;
+  transition: color 0.3s;
+
+  &:hover {
+    color: @text-color-secondary;
+  }
+
+  &:active {
+    color: @text-color;
+  }
+
+  + i {
+    margin-left: 6px;
+  }
+}
+
 @import './search-input';
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
index b7d1aba8f..08c6f99bb 100644
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -363,6 +363,8 @@
     position: absolute;
     top: 50%;
     z-index: 2;
+    display: flex;
+    align-items: center;
     color: @input-color;
     line-height: 0;
     transform: translateY(-50%);