fix: clone input should not replace customize props (#722)

Author: zombieJ

src/Selector/Input.tsx

@@ -58,17 +58,16 @@ const Input: React.RefForwardingComponent<InputRef, InputProps> = (
 ) => {
   let inputNode: React.ComponentElement<any, any> = inputElement || <input />;
 
+  const { ref: originRef, props: originProps } = inputNode;
+
   const {
-    ref: originRef,
-    props: {
-      onKeyDown: onOriginKeyDown,
-      onChange: onOriginChange,
-      onMouseDown: onOriginMouseDown,
-      onCompositionStart: onOriginCompositionStart,
-      onCompositionEnd: onOriginCompositionEnd,
-      style,
-    },
-  } = inputNode;
+    onKeyDown: onOriginKeyDown,
+    onChange: onOriginChange,
+    onMouseDown: onOriginMouseDown,
+    onCompositionStart: onOriginCompositionStart,
+    onCompositionEnd: onOriginCompositionEnd,
+    style,
+  } = originProps;
 
   inputNode = React.cloneElement(inputNode, {
     id,
@@ -79,7 +78,7 @@ const Input: React.RefForwardingComponent<InputRef, InputProps> = (
     type: 'search',
     autoFocus,
     className: classNames(`${prefixCls}-selection-search-input`, inputNode?.props?.className),
-    style: { ...style, opacity: editable ? null : 0 },
+
     role: 'combobox',
     'aria-expanded': open,
     'aria-haspopup': 'listbox',
@@ -92,6 +91,12 @@ const Input: React.RefForwardingComponent<InputRef, InputProps> = (
     maxLength,
     readOnly: !editable,
     unselectable: !editable ? 'on' : null,
+
+    ...originProps,
+
+    // Override over origin props
+    style: { ...style, opacity: editable ? null : 0 },
+
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {
       onKeyDown(event);
       if (onOriginKeyDown) {

tests/Select.test.tsx

@@ -827,55 +827,68 @@ describe('Select.Basic', () => {
     expect(focusSpy).toHaveBeenCalled();
   });
 
-  it('combobox could customize input element', () => {
-    const onKeyDown = jest.fn();
-    const onChange = jest.fn();
-    const onMouseDown = jest.fn();
-    const onCompositionStart = jest.fn();
-    const onCompositionEnd = jest.fn();
-    const textareaRef = jest.fn();
-    const mouseDownPreventDefault = jest.fn();
-    const wrapper = mount(
-      <Select
-        mode="combobox"
-        getInputElement={() => (
-          <textarea
-            onKeyDown={onKeyDown}
-            onChange={onChange}
-            onMouseDown={onMouseDown}
-            onCompositionStart={onCompositionStart}
-            onCompositionEnd={onCompositionEnd}
-            ref={textareaRef}
-            className="custom-input"
-          />
-        )}
-      >
-        <Option value="1">1</Option>
-        <Option value="2">2</Option>
-      </Select>,
-    );
+  describe('combobox could customize input element', () => {
+    it('work', () => {
+      const onKeyDown = jest.fn();
+      const onChange = jest.fn();
+      const onMouseDown = jest.fn();
+      const onCompositionStart = jest.fn();
+      const onCompositionEnd = jest.fn();
+      const textareaRef = jest.fn();
+      const mouseDownPreventDefault = jest.fn();
+      const wrapper = mount(
+        <Select
+          mode="combobox"
+          getInputElement={() => (
+            <textarea
+              onKeyDown={onKeyDown}
+              onChange={onChange}
+              onMouseDown={onMouseDown}
+              onCompositionStart={onCompositionStart}
+              onCompositionEnd={onCompositionEnd}
+              ref={textareaRef}
+              className="custom-input"
+            />
+          )}
+        >
+          <Option value="1">1</Option>
+          <Option value="2">2</Option>
+        </Select>,
+      );
 
-    expect(wrapper.find('textarea').length).toBe(1);
-    toggleOpen(wrapper);
-    wrapper
-      .find('.rc-select')
-      .find('textarea')
-      .simulate('mouseDown', { preventDefault: mouseDownPreventDefault })
-      .simulate('keyDown', { which: KeyCode.NUM_ONE })
-      .simulate('change', { target: { value: '1' } })
-      .simulate('compositionStart')
-      .simulate('compositionEnd');
+      expect(wrapper.find('textarea').length).toBe(1);
+      toggleOpen(wrapper);
+      wrapper
+        .find('.rc-select')
+        .find('textarea')
+        .simulate('mouseDown', { preventDefault: mouseDownPreventDefault })
+        .simulate('keyDown', { which: KeyCode.NUM_ONE })
+        .simulate('change', { target: { value: '1' } })
+        .simulate('compositionStart')
+        .simulate('compositionEnd');
 
-    selectItem(wrapper);
-    expect(wrapper.find('textarea').props().value).toEqual('1');
-    expect(wrapper.find('textarea').hasClass('custom-input')).toBe(true);
-    expect(mouseDownPreventDefault).not.toHaveBeenCalled();
-    expect(onKeyDown).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalled();
-    expect(onMouseDown).toHaveBeenCalled();
-    expect(textareaRef).toHaveBeenCalled();
-    expect(onCompositionStart).toHaveBeenCalled();
-    expect(onCompositionEnd).toHaveBeenCalled();
+      selectItem(wrapper);
+      expect(wrapper.find('textarea').props().value).toEqual('1');
+      expect(wrapper.find('textarea').hasClass('custom-input')).toBe(true);
+      expect(mouseDownPreventDefault).not.toHaveBeenCalled();
+      expect(onKeyDown).toHaveBeenCalled();
+      expect(onChange).toHaveBeenCalled();
+      expect(onMouseDown).toHaveBeenCalled();
+      expect(textareaRef).toHaveBeenCalled();
+      expect(onCompositionStart).toHaveBeenCalled();
+      expect(onCompositionEnd).toHaveBeenCalled();
+    });
+
+    it('not override customize props', () => {
+      const wrapper = mount(
+        <Select mode="combobox" getInputElement={() => <input type="email" />}>
+          <Option value="1">1</Option>
+          <Option value="2">2</Option>
+        </Select>,
+      );
+
+      expect(wrapper.find('input').prop('type')).toEqual('email');
+    });
   });
 
   it('getRawInputElement for rc-cascader', () => {
@@ -1370,7 +1383,6 @@ describe('Select.Basic', () => {
     );
 
     for (let i = 0; i < 10; i += 1) {
-      console.log('=>', i);
       onSelect.mockReset();
       wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER });
       expect(onSelect).toHaveBeenCalledWith('1', expect.anything());