fix: input clear style (#1297)

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 (

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);

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';

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%);