fix: separate error when content contains (#522)

Author: 07akioni

src/Selector/index.tsx

@@ -73,7 +73,7 @@ export interface SelectorProps {
   maxTagPlaceholder?: React.ReactNode | ((omittedValues: LabelValueType[]) => React.ReactNode);
   tagRender?: (props: CustomTagProps) => React.ReactElement;
 
-  /** Check if `tokenSeparators` contains `\n` */
+  /** Check if `tokenSeparators` contains `\n` or `\r\n` */
   tokenWithEnter?: boolean;
 
   // Motion
@@ -180,7 +180,8 @@ const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> =
 
     // Pasted text should replace back to origin content
     if (tokenWithEnter && pastedTextRef.current && /[\r\n]/.test(pastedTextRef.current)) {
-      const replacedText = pastedTextRef.current.replace(/[\r\n]/g, ' ');
+      // CRLF will be treated as a single space for input element
+      const replacedText = pastedTextRef.current.replace(/\r\n/g, ' ').replace(/[\r\n]/g, ' ');
       value = value.replace(replacedText, pastedTextRef.current);
     }
 

src/generate.tsx

@@ -322,7 +322,10 @@ export default function generateSelector<
     const selectorRef = useRef<RefSelectorProps>(null);
     const listRef = useRef<RefOptionListProps>(null);
 
-    const tokenWithEnter = useMemo(() => (tokenSeparators || []).includes('\n'), [tokenSeparators]);
+    const tokenWithEnter = useMemo(
+      () => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)),
+      [tokenSeparators],
+    );
 
     /** Used for component focused management */
     const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset();

tests/Tags.test.tsx

@@ -140,28 +140,49 @@ 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>,
-    );
+  // Paste tests
+  [
+    {
+      tokenSeparators: [' ', '\n'],
+      clipboardText: '\n  light\n  bamboo\n  ',
+      inputValue: '   light   bamboo   ',
+    },
+    {
+      tokenSeparators: ['\r\n'],
+      clipboardText: '\r\nlight\r\nbamboo\r\n',
+      inputValue: ' light bamboo ',
+    },
+    {
+      tokenSeparators: [' ', '\r\n'],
+      clipboardText: '\r\n light\r\n bamboo\r\n ',
+      inputValue: '  light  bamboo  ',
+    },
+    {
+      tokenSeparators: ['\n'],
+      clipboardText: '\nlight\nbamboo\n',
+      inputValue: ' light bamboo ',
+    },
+  ].forEach(({ tokenSeparators, clipboardText, inputValue }) => {
+    it(`paste content to split (${JSON.stringify(tokenSeparators)})`, () => {
+      const onChange = jest.fn();
+      const wrapper = mount(
+        <Select mode="tags" tokenSeparators={tokenSeparators} onChange={onChange}>
+          <Option value="1">1</Option>
+        </Select>,
+      );
 
-    wrapper.find('input').simulate('paste', {
-      clipboardData: {
-        getData: () => `
-        light
-        bamboo
-        `,
-      },
+      wrapper.find('input').simulate('paste', {
+        clipboardData: {
+          getData: () => clipboardText,
+        },
+      });
+      wrapper.find('input').simulate('change', {
+        target: { value: inputValue },
+      });
+
+      expect(onChange).toHaveBeenCalledWith(['light', 'bamboo'], expect.anything());
+      expect(onChange).toHaveBeenCalledTimes(1);
     });
-    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', () => {