feat: customize input can forward ref

Author: zombieJ

examples/combobox.tsx

@@ -10,8 +10,14 @@ class Combobox extends React.Component {
     options: [],
   };
 
+  textareaRef = React.createRef<HTMLTextAreaElement>();
+
   timeoutId: number;
 
+  componentDidMount() {
+    console.log('Ref:', this.textareaRef);
+  }
+
   onChange = (value, option) => {
     console.log('onChange', value, option);
     this.setState({
@@ -97,7 +103,9 @@ class Combobox extends React.Component {
           <Select
             mode="combobox"
             style={{ width: 200 }}
-            getInputElement={() => <textarea rows={3} />}
+            getInputElement={() => (
+              <textarea style={{ background: 'red' }} rows={3} ref={this.textareaRef} />
+            )}
             options={[{ value: 'light' }, { value: 'bamboo' }]}
             allowClear
             placeholder="2333"

src/Selector/Input.tsx

@@ -18,6 +18,14 @@ interface InputProps {
   onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLElement>;
 }
 
+function fillRef(node: InputRef, ref: React.LegacyRef<InputRef> | React.Ref<InputRef>) {
+  if (typeof ref === 'function') {
+    ref(node);
+  } else if (typeof ref === 'object') {
+    (ref as any).current = node;
+  }
+}
+
 const Input: React.RefForwardingComponent<InputRef, InputProps> = (
   {
     prefixCls,
@@ -35,19 +43,27 @@ const Input: React.RefForwardingComponent<InputRef, InputProps> = (
   },
   ref,
 ) => {
-  let inputNode: React.ReactElement = inputElement || <input />;
+  let inputNode: React.ComponentElement<any, any> = inputElement || <input />;
+
+  const {
+    ref: originRef,
+    props: { onKeyDown: onOriginKeyDown, onChange: onOriginChange, style },
+  } = inputNode;
 
-  const { onKeyDown: onOriginKeyDown, onChange: onOriginChange } = inputNode.props;
+  function inputRef(node: InputRef) {
+    fillRef(node, ref);
+    fillRef(node, originRef);
+  }
 
   inputNode = React.cloneElement(inputNode, {
     id,
-    ref,
+    ref: inputRef,
     disabled,
     tabIndex,
     autoComplete: 'off',
     autoFocus,
     className: `${prefixCls}-selection-search-input`,
-    style: { opacity: editable ? null : 0 },
+    style: { ...style, opacity: editable ? null : 0 },
     role: 'combobox',
     'aria-expanded': open,
     'aria-haspopup': 'listbox',