Fix clear icon of combobox select

src/Select.jsx

@@ -34,7 +34,7 @@ function saveRef(name, component) {
 }
 
 function chaining(...fns) {
-  return function (...args) {
+  return function (...args) { // eslint-disable-line
     // eslint-disable-line
     for (let i = 0; i < fns.length; i++) {
       if (fns[i] && typeof fns[i] === 'function') {
@@ -1104,13 +1104,41 @@ export default class Select extends React.Component {
         {innerNode}
       </div>
     );
-  };
+  }
+
+  renderClear() {
+    const { prefixCls, allowClear } = this.props;
+    const { value, inputValue } = this.state;
+    const clear = (
+      <span
+        key="clear"
+        onMouseDown={preventDefaultEvent}
+        style={UNSELECTABLE_STYLE}
+        {...UNSELECTABLE_ATTRIBUTE}
+        className={`${prefixCls}-selection__clear`}
+        onClick={this.onClearSelection}
+      />
+    );
+    if (!allowClear) {
+      return null;
+    }
+    if (isCombobox(this.props)) {
+      if (inputValue) {
+        return clear;
+      }
+      return null;
+    }
+    if (inputValue || value.length) {
+      return clear;
+    }
+    return null;
+  }
 
   render() {
     const props = this.props;
     const multiple = isMultipleOrTags(props);
     const state = this.state;
-    const { className, disabled, allowClear, prefixCls } = props;
+    const { className, disabled, prefixCls } = props;
     const ctrlNode = this.renderTopControlNode();
     let extraSelectionProps = {};
     const { open } = this.state;
@@ -1131,23 +1159,6 @@ export default class Select extends React.Component {
       [`${prefixCls}-enabled`]: !disabled,
       [`${prefixCls}-allow-clear`]: !!props.allowClear,
     };
-    const clearStyle = {
-      ...UNSELECTABLE_STYLE,
-      display: 'none',
-    };
-    if (state.inputValue || state.value.length) {
-      clearStyle.display = 'block';
-    }
-    const clear = (
-      <span
-        key="clear"
-        onMouseDown={preventDefaultEvent}
-        style={clearStyle}
-        {...UNSELECTABLE_ATTRIBUTE}
-        className={`${prefixCls}-selection__clear`}
-        onClick={this.onClearSelection}
-      />
-    );
     return (
       <SelectTrigger
         onPopupFocus={this.onPopupFocus}
@@ -1194,7 +1205,7 @@ export default class Select extends React.Component {
             {...extraSelectionProps}
           >
             {ctrlNode}
-            {allowClear ? clear : null}
+            {this.renderClear()}
             {multiple || !props.showArrow ? null : (
               <span
                 key="arrow"

tests/Select.combobox.spec.js

@@ -239,4 +239,18 @@ describe('Select.combobox', () => {
     expect(handleChange).toBeCalledWith('Two');
     expect(handleSelect).toBeCalledWith('Two', expect.anything());
   });
+
+  it('should hide clear icon when inputValue is \'\'', () => {
+    const wrapper = mount(
+      <Select combobox allowClear>
+        <Option value="One">One</Option>
+        <Option value="Two">Two</Option>
+      </Select>
+    );
+
+    wrapper.find('input').simulate('change', { target: { value: '1' } });
+    expect(wrapper.find('.rc-select-selection__clear').length).toBe(1);
+    wrapper.find('input').simulate('change', { target: { value: '' } });
+    expect(wrapper.find('.rc-select-selection__clear').length).toBe(0);
+  });
 });

tests/Select.spec.js

@@ -101,7 +101,7 @@ describe('Select', () => {
         <Option value="2">2</Option>
       </Select>
     );
-    expect(wrapper.find('.rc-select-selection__clear').props().style.display).toBe('none');
+    expect(wrapper.find('.rc-select-selection__clear').length).toBe(0);
   });
 
   it('should not response click event when select is disabled', () => {

tests/__snapshots__/Select.combobox.spec.js.snap

@@ -38,11 +38,6 @@ exports[`Select.combobox allowClear renders correctly 1`] = `
           </li>
         </ul>
       </div>
-      <span
-        class="rc-select-selection__clear"
-        style="user-select:none;-webkit-user-select:none;display:none;"
-        unselectable="unselectable"
-      />
       <span
         class="rc-select-arrow"
         style="user-select:none;-webkit-user-select:none;"

tests/__snapshots__/Select.multiple.spec.js.snap

@@ -38,11 +38,6 @@ exports[`Select.multiple allowClear renders correctly 1`] = `
           </li>
         </ul>
       </div>
-      <span
-        class="rc-select-selection__clear"
-        style="user-select:none;-webkit-user-select:none;display:none;"
-        unselectable="unselectable"
-      />
     </div>
   </div>
 </div>

tests/__snapshots__/Select.spec.js.snap

@@ -261,7 +261,7 @@ exports[`Select render renders correctly 1`] = `
       </div>
       <span
         class="antd-selection__clear"
-        style="user-select:none;-webkit-user-select:none;display:block;"
+        style="user-select:none;-webkit-user-select:none;"
         unselectable="unselectable"
       />
       <span
@@ -330,7 +330,7 @@ exports[`Select render renders dropdown correctly 1`] = `
       </div>
       <span
         class="antd-selection__clear"
-        style="user-select:none;-webkit-user-select:none;display:block;"
+        style="user-select:none;-webkit-user-select:none;"
         unselectable="unselectable"
       />
       <span

tests/__snapshots__/Select.tags.spec.js.snap

@@ -38,11 +38,6 @@ exports[`Select.tags allowClear renders correctly 1`] = `
           </li>
         </ul>
       </div>
-      <span
-        class="rc-select-selection__clear"
-        style="user-select:none;-webkit-user-select:none;display:none;"
-        unselectable="unselectable"
-      />
     </div>
   </div>
 </div>