fix: [TagInput] Input value will be cleared when separator is not array or string #182

packages/semi-foundation/tagInput/utils/getSplitedArray.ts

@@ -1,15 +1,14 @@
-import { isString, isArray } from 'lodash-es';
+import { isString, isArray, isNumber } from 'lodash-es';
 
 /**
- * Get the splited array
- * @param {string} originString String to be splited
- * @param {string | string[]} separators
- * @returns {string[]} The splited result array
+ * Get the splited array.
+ * We expect separators to be string | string[] | null, but users
+ * are also allowed to pass in other types. 
  */
-const getSplitedArray = (originString: string, separators: string | string[]) => {
+const getSplitedArray = (originString: string, separators: string | string[] | null) => {
     let splitedValue: string | string[] = [];
-    if (isString(separators)) {
-        splitedValue = originString.split(separators);
+    if (isString(separators) || isNumber(separators)) {
+        splitedValue = originString.split(separators as string);
     } else if (isArray(separators)) {
         const tempChar = separators[0]; // temporary splitter
         splitedValue = originString;
@@ -17,6 +16,8 @@ const getSplitedArray = (originString: string, separators: string | string[]) =>
             splitedValue = splitedValue.split(separators[i]).join(tempChar);
         }
         splitedValue = splitedValue.split(tempChar);
+    } else {
+        splitedValue.push(originString);
     }
     return splitedValue;
 };

packages/semi-ui/tagInput/__test__/tagInput.test.js

@@ -97,6 +97,31 @@ describe('TagInput', () => {
         expect(tags.at(0).getDOMNode().textContent).toEqual('abc');
         expect(tags.at(1).getDOMNode().textContent).toEqual('hotsoon');
         tagInput.unmount();
+
+        /* when separator is null */
+        const props2 = {
+            separator: null,
+            inputValue: 'tiktok-hotsoon'
+        }
+        const tagInput2 = getTagInput(props2);
+        tagInput2.find('input').simulate('keyDown', { keyCode: 13 });
+        const tags2 = tagInput2.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
+        expect(tags2.length).toEqual(1);
+        expect(tags2.at(0).getDOMNode().textContent).toEqual('tiktok-hotsoon');
+        tagInput2.unmount();
+
+        /* when separator is number */
+        const props3 = {
+            separator: 1,
+            inputValue: 'tiktok1hotsoon'
+        }
+        const tagInput3 = getTagInput(props3);
+        tagInput3.find('input').simulate('keyDown', { keyCode: 13 });
+        const tags3 = tagInput3.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
+        expect(tags3.length).toEqual(2);
+        expect(tags3.at(0).getDOMNode().textContent).toEqual('tiktok');
+        expect(tags3.at(1).getDOMNode().textContent).toEqual('hotsoon');
+        tagInput3.unmount();
     });
 
     

packages/semi-ui/tagInput/_story/tagInput.stories.js

@@ -27,7 +27,42 @@ stories.add('autoFocus', () => (
 
 
 stories.add('separator', () => (
-    <TagInput separator='-' style={style} placeholder='使用"-"分隔' />
+    <>
+        <TagInput
+            placeholder='默认 separator'
+            onChange={v => console.log(v)}
+        />
+        <br /><br />
+        <TagInput
+            separator='-'
+            placeholder='使用 - 进行批量输入'
+            onChange={v => console.log(v)}
+        />
+        <br /><br />
+        <TagInput
+            separator={[',','|','.']}
+            placeholder='支持多个分隔符进行批量输入'
+            onChange={v => console.log(v)}
+        />
+        <br /><br />
+        <TagInput
+            separator={null}
+            placeholder='separator 为 null'
+            onChange={v => console.log(v)}
+        />
+        <br /><br />
+        <TagInput
+            separator={1}
+            placeholder='separator 为 number'
+            onChange={v => console.log(v)}
+        />
+        <br /><br />
+        <TagInput
+            separator={' '}
+            placeholder='separator 为 空格'
+            onChange={v => console.log(v)}
+        />
+    </>
 ))
 
 

packages/semi-ui/tagInput/index.tsx

@@ -48,7 +48,7 @@ export interface TagInputProps {
     placeholder?: string;
     prefix?: React.ReactNode;
     renderTagItem?: (value: string, index: number) => React.ReactNode;
-    separator?: string | string[];
+    separator?: string | string[] | null;
     showClear?: boolean;
     size?: Size;
     style?: React.CSSProperties;