Merge pull request #1108 from DouyinFE/fix/tagGroup-dataIsolation

fix: [tagGroup] Fix the problem of tagGroup polluting incoming data

content/show/tag/index.md

@@ -167,17 +167,17 @@ import { TagGroup } from '@douyinfe/semi-ui';
 
 () => {
     const tagList = [
-        { color: 'white', children:'抖音' },
-        { color: 'white', children:'火山' },
-        { color: 'white', children:'剪映' },
-        { color: 'white', children:'醒图' },
+        { color: 'white', children: '抖音' },
+        { color: 'white', children: '火山' },
+        { color: 'white', children: '剪映' },
+        { color: 'white', children: '醒图' },
     ];
     const src = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png';
     const tagList2 = [
-        { color: 'white', children:'Douyin', avatarSrc:src },
-        { color: 'white', children:'Hotsoon', avatarSrc:src },
-        { color: 'white', children:'Capcut', avatarSrc:src },
-        { color: 'white', children:'Xingtu', avatarSrc:src },
+        { color: 'white', children: 'Douyin', avatarSrc: src },
+        { color: 'white', children: 'Hotsoon', avatarSrc: src },
+        { color: 'white', children: 'Capcut', avatarSrc: src },
+        { color: 'white', children: 'Xingtu', avatarSrc: src },
     ];
     const divStyle = {
         backgroundColor: 'var(--semi-color-fill-0)',

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

@@ -287,4 +287,54 @@ export const TagGroupCloseable = () => <TagGroupCloseableDemo />;
 
 TagGroupCloseable.story = {
   name: 'tagGroup closable',
-}
+}
+
+export const Issue1107 = () => {
+    const src = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png';
+    const tagList = [
+        { color: 'white', children:'Douyin', avatarSrc:src },
+        { color: 'white', children:'Hotsoon', avatarSrc:src },
+        { color: 'white', children:'Capcut', avatarSrc:src },
+        { color: 'white', children:'Xingtu', avatarSrc:src },
+    ];
+    const divStyle = {
+        backgroundColor: 'var(--semi-color-fill-0)',
+        height: 35,
+        width: 300,
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 10px',
+        marginBottom: 30,
+    };
+    const tagGroupStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        width: 350,
+    };
+    return (
+        <>
+            <div style={divStyle}>
+                <TagGroup 
+                  maxTagCount={3} 
+                  style={tagGroupStyle} 
+                  tagList={tagList} 
+                  size="small" 
+                />
+            </div>
+            <div style={divStyle}>
+                <TagGroup
+                    maxTagCount={2}
+                    style={tagGroupStyle}
+                    tagList={tagList}
+                    size="large"
+                    avatarShape="circle"
+                    showPopover
+                />
+            </div>
+        </>
+    );
+};
+
+Issue1107.story = {
+  name: 'issue 1107',
+};

packages/semi-ui/tag/group.tsx

@@ -89,24 +89,25 @@ export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
             if (mode === 'custom') {
                 return tag as React.ReactNode;
             }
-            if (!(tag as TagProps).size) {
-                (tag as TagProps).size = size;
+            const newTag = { ...(tag as TagProps) }; 
+            if (!(newTag as TagProps).size) {
+                (newTag as TagProps).size = size;
             }
             
-            if (!(tag as TagProps).avatarShape) {
-                (tag as TagProps).avatarShape = avatarShape;
+            if (!(newTag as TagProps).avatarShape) {
+                (newTag as TagProps).avatarShape = avatarShape;
             }
 
-            if (!(tag as TagProps).tagKey) {
-                if (typeof (tag as TagProps).children === 'string' || typeof (tag as TagProps).children === 'number') {
-                    (tag as TagProps).tagKey = (tag as TagProps).children as string | number;
+            if (!(newTag as TagProps).tagKey) {
+                if (typeof (newTag as TagProps).children === 'string' || typeof (newTag as TagProps).children === 'number') {
+                    (newTag as TagProps).tagKey = (newTag as TagProps).children as string | number;
                 } else {
-                    (tag as TagProps).tagKey = Math.random();
+                    (newTag as TagProps).tagKey = Math.random();
                 }
             }
-            return <Tag {...(tag as TagProps)} key={(tag as TagProps).tagKey} onClose={(tagChildren, e, tagKey) => {
-                if ((tag as TagProps).onClose) {
-                    (tag as TagProps).onClose(tagChildren, e, tagKey);
+            return <Tag {...(newTag as TagProps)} key={(newTag as TagProps).tagKey} onClose={(tagChildren, e, tagKey) => {
+                if ((newTag as TagProps).onClose) {
+                    (newTag as TagProps).onClose(tagChildren, e, tagKey);
                 }
                 onTagClose && onTagClose(tagChildren, e, tagKey);
             }} />;