Merge pull request #145 from RaoHai/getInputElement

 feature: Customize input element of combobox

Author: yiminghe

README.md

@@ -97,6 +97,7 @@ React.render(c, container);
 |onDeselect | called when a option is deselected. param is option's value. only called for multiple or tags | Function(value) | - |
 |defaultActiveFirstOption | whether active first option by default | bool | true |
 |getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} |
+|getInputElement| customize input element | function(): Element | - |
 
 ### Option props
 

src/Select.jsx

@@ -77,6 +77,7 @@ const Select = React.createClass({
     dropdownStyle: PropTypes.object,
     maxTagTextLength: PropTypes.number,
     tokenSeparators: PropTypes.arrayOf(PropTypes.string),
+    getInputElement: PropTypes.func,
   },
 
   mixins: [FilterMixin],
@@ -506,15 +507,19 @@ const Select = React.createClass({
 
   getInputElement() {
     const props = this.props;
+    const inputElement = props.getInputElement ? props.getInputElement() : <input />;
+    const inputCls = classnames(inputElement.props.className, {
+      [`${props.prefixCls}-search__field`]: true,
+    });
     return (<div className={`${props.prefixCls}-search__field__wrap`}>
-      <input
-        ref={this.saveInputRef}
-        onChange={this.onInputChange}
-        onKeyDown={this.onInputKeyDown}
-        value={this.state.inputValue}
-        disabled={props.disabled}
-        className={`${props.prefixCls}-search__field`}
-      />
+      {React.cloneElement(inputElement, {
+        ref: this.saveInputRef,
+        onChange: this.onInputChange,
+        onKeyDown: this.onInputKeyDown,
+        value: this.state.inputValue,
+        disabled: props.disabled,
+        className: inputCls,
+      })}
       <span
         ref={this.saveInputMirrorRef}
         className={`${props.prefixCls}-search__field__mirror`}

tests/Select.spec.js

@@ -408,4 +408,20 @@ describe('Select', () => {
 
     expect(input.focus).toBeCalled();
   });
+
+  it('combox could comstomize input element', () => {
+    const wrapper = mount(
+      <Select combobox getInputElement={() => <textarea />}>
+        <Option value="1">1</Option>
+        <Option value="2">2</Option>
+      </Select>
+    );
+
+    expect(wrapper.find('textarea').length).toBe(1);
+    wrapper.find('.rc-select').simulate('click');
+    const dropdownWrapper = mount(wrapper.find('Trigger').node.getComponent());
+
+    dropdownWrapper.find('MenuItem').first().simulate('click');
+    expect(wrapper.state().inputValue).toBe('1');
+  });
 });