chore: Support multiple line paste (#475)

* support onPaste

* update test case

Author: zombieJ

examples/tags.tsx

@@ -44,7 +44,7 @@ const Test: React.FC = () => {
           onDeselect={(val, option) => {
             console.log('deselected', val, option);
           }}
-          tokenSeparators={[' ', ',']}
+          tokenSeparators={[' ', ',', '\n']}
           onFocus={() => console.log('focus')}
           onBlur={() => console.log('blur')}
         >

src/Selector/Input.tsx

@@ -19,6 +19,7 @@ interface InputProps {
   onKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLElement>;
   onMouseDown: React.MouseEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLElement>;
   onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLElement>;
+  onPaste: React.ClipboardEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLElement>;
 }
 
 const Input: React.RefForwardingComponent<InputRef, InputProps> = (
@@ -36,6 +37,7 @@ const Input: React.RefForwardingComponent<InputRef, InputProps> = (
     onKeyDown,
     onMouseDown,
     onChange,
+    onPaste,
     open,
   },
   ref,
@@ -88,6 +90,7 @@ const Input: React.RefForwardingComponent<InputRef, InputProps> = (
         onOriginChange(event);
       }
     },
+    onPaste,
   });
 
   return inputNode;

src/Selector/MultipleSelector.tsx

@@ -55,6 +55,7 @@ const SelectSelector: React.FC<SelectorProps> = ({
 
   onSelect,
   onInputChange,
+  onInputPaste,
   onInputKeyDown,
   onInputMouseDown,
 }) => {
@@ -191,6 +192,7 @@ const SelectSelector: React.FC<SelectorProps> = ({
           onKeyDown={onInputKeyDown}
           onMouseDown={onInputMouseDown}
           onChange={onInputChange}
+          onPaste={onInputPaste}
           tabIndex={tabIndex}
         />
 

src/Selector/SingleSelector.tsx

@@ -30,6 +30,7 @@ const SingleSelector: React.FC<SelectorProps> = ({
   onInputKeyDown,
   onInputMouseDown,
   onInputChange,
+  onInputPaste,
 }) => {
   const combobox = mode === 'combobox';
   const inputEditable = combobox || (showSearch && open);
@@ -62,6 +63,7 @@ const SingleSelector: React.FC<SelectorProps> = ({
           onKeyDown={onInputKeyDown}
           onMouseDown={onInputMouseDown}
           onChange={onInputChange}
+          onPaste={onInputPaste}
           tabIndex={tabIndex}
         />
       </span>

src/Selector/index.tsx

@@ -36,6 +36,7 @@ export interface InnerSelectorProps {
   onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   onInputMouseDown: React.MouseEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   onInputChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onInputPaste: React.ClipboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 }
 
 export interface RefSelectorProps {
@@ -139,12 +140,37 @@ const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> =
     setInputMouseDown(true);
   };
 
-  const onInputChange = ({ target: { value } }) => {
+  // When paste come, ignore next onChange
+  const pasteClearRef = React.useRef(false);
+
+  const triggerOnSearch = (value: string) => {
     if (onSearch(value) !== false) {
       onToggleOpen(true);
     }
   };
 
+  const onInputChange = ({ target: { value } }) => {
+    if (pasteClearRef.current) {
+      pasteClearRef.current = false;
+      return;
+    }
+
+    triggerOnSearch(value);
+  };
+
+  const onInputPaste: React.ClipboardEventHandler = e => {
+    const { clipboardData } = e;
+    const value = clipboardData.getData('text');
+
+    // Block next onChange
+    pasteClearRef.current = true;
+    setTimeout(() => {
+      pasteClearRef.current = false;
+    });
+
+    triggerOnSearch(value);
+  };
+
   // ====================== Focus ======================
   // Should focus input if click the selector
   const onClick = ({ target }) => {
@@ -170,6 +196,7 @@ const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> =
     onInputKeyDown: onInternalInputKeyDown,
     onInputMouseDown: onInternalInputMouseDown,
     onInputChange,
+    onInputPaste,
   };
 
   const selectNode = multiple ? (

tests/Tags.test.tsx

@@ -13,12 +13,7 @@ import openControlledTest from './shared/openControlledTest';
 import removeSelectedTest from './shared/removeSelectedTest';
 import renderTest from './shared/renderTest';
 import throwOptionValue from './shared/throwOptionValue';
-import {
-  injectRunAllTimers,
-  findSelection,
-  expectOpen,
-  toggleOpen,
-} from './utils/common';
+import { injectRunAllTimers, findSelection, expectOpen, toggleOpen } from './utils/common';
 
 describe('Select.Tags', () => {
   injectRunAllTimers(jest);
@@ -72,12 +67,7 @@ describe('Select.Tags', () => {
     const handleSelect = jest.fn();
     const option2 = <Option value="2">2</Option>;
     const wrapper = mount(
-      <Select
-        mode="tags"
-        tokenSeparators={[',']}
-        onChange={handleChange}
-        onSelect={handleSelect}
-      >
+      <Select mode="tags" tokenSeparators={[',']} onChange={handleChange} onSelect={handleSelect}>
         <Option value="1">1</Option>
         {option2}
       </Select>,
@@ -87,10 +77,7 @@ describe('Select.Tags', () => {
 
     wrapper.find('input').simulate('change', { target: { value: '2,3,4' } });
 
-    expect(handleChange).toHaveBeenCalledWith(
-      ['2', '3', '4'],
-      expect.anything(),
-    );
+    expect(handleChange).toHaveBeenCalledWith(['2', '3', '4'], expect.anything());
     expect(handleSelect).toHaveBeenCalledTimes(3);
     expect(handleSelect).toHaveBeenLastCalledWith('4', expect.anything());
     expect(findSelection(wrapper).text()).toEqual('2');
@@ -100,6 +87,30 @@ describe('Select.Tags', () => {
     expectOpen(wrapper, false);
   });
 
+  it('paste content to split', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <Select mode="tags" tokenSeparators={[' ', '\n']} onChange={onChange}>
+        <Option value="1">1</Option>
+      </Select>,
+    );
+
+    wrapper.find('input').simulate('paste', {
+      clipboardData: {
+        getData: () => `
+        light
+        bamboo
+        `,
+      },
+    });
+    wrapper.find('input').simulate('change', {
+      target: { value: '         light         bamboo         ' },
+    });
+
+    expect(onChange).toHaveBeenCalledWith(['light', 'bamboo'], expect.anything());
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
   it('renders unlisted item in value', () => {
     const wrapper = mount(
       <Select mode="tags" value="3" open>
@@ -180,9 +191,7 @@ describe('Select.Tags', () => {
         </span>
       );
     };
-    const wrapper = mount(
-      <Select mode="tags" tokenSeparators={[',']} tagRender={tagRender} />,
-    );
+    const wrapper = mount(<Select mode="tags" tokenSeparators={[',']} tagRender={tagRender} />);
 
     wrapper.find('input').instance().focus = jest.fn();