fix: issue 2415

packages/semi-foundation/overflowList/foundation.ts

@@ -1,6 +1,8 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
 import { noop, get, cloneDeep } from 'lodash';
+import copy from 'fast-copy';
+
 const Boundary = strings.BOUNDARY_MAP;
 const OverflowDirection = strings.OVERFLOW_DIR;
 
@@ -31,13 +33,15 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
             return overflow;
         }
 
-        const visibleStateArr = items.map(({ key }: { key: string }) => Boolean(visibleState.get(key)));
+        const cloneItems = copy(items);
+
+        const visibleStateArr = cloneItems.map(({ key }: { key: string }) => Boolean(visibleState.get(key)));
         const visibleStart = visibleStateArr.indexOf(true);
         const visibleEnd = visibleStateArr.lastIndexOf(true);
 
         const overflowList = [];
-        overflowList[0] = visibleStart >= 0 ? items.slice(0, visibleStart) : [];
-        overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items;
+        overflowList[0] = visibleStart >= 0 ? cloneItems.slice(0, visibleStart) : [];
+        overflowList[1] = visibleEnd >= 0 ? cloneItems.slice(visibleEnd + 1, cloneItems.length) : cloneItems;
         return overflowList;
     }
 

packages/semi-foundation/package.json

@@ -12,6 +12,7 @@
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
         "date-fns-tz": "^1.3.8",
+        "fast-copy": "^3.0.1",
         "lodash": "^4.17.21",
         "memoize-one": "^5.2.1",
         "scroll-into-view-if-needed": "^2.2.24"
@@ -38,4 +39,4 @@
         "merge2": "^1.4.1",
         "through2": "^4.0.2"
     }
-}
+}

packages/semi-ui/overflowList/index.tsx

@@ -11,7 +11,7 @@ import IntersectionObserver from './intersectionObserver';
 import OverflowListFoundation, { OverflowListAdapter } from '@douyinfe/semi-foundation/overflowList/foundation';
 
 import '@douyinfe/semi-foundation/overflowList/overflowList.scss';
-import { cloneDeep } from '../_utils';
+import copy from 'fast-copy';
 
 const prefixCls = cssClasses.PREFIX;
 const Boundary = strings.BOUNDARY_MAP;
@@ -126,8 +126,8 @@ class OverflowList extends BaseComponent<OverflowListProps, OverflowListState> {
                 }
 
                 const isCollapseFromStart = props.collapseFrom === Boundary.START;
-                const visible = isCollapseFromStart ? cloneDeep(props.items).reverse().slice(0, maxCount) : props.items.slice(0, maxCount);
-                const overflow = isCollapseFromStart ? cloneDeep(props.items).reverse().slice(maxCount) : props.items.slice(maxCount);
+                const visible = isCollapseFromStart ? copy(props.items).reverse().slice(0, maxCount) : props.items.slice(0, maxCount);
+                const overflow = isCollapseFromStart ? copy(props.items).reverse().slice(maxCount) : props.items.slice(maxCount);
                 newState.visible = visible;
                 newState.overflow = overflow;
                 newState.maxCount = maxCount;

packages/semi-ui/package.json

@@ -28,6 +28,7 @@
         "copy-text-to-clipboard": "^2.1.1",
         "date-fns": "^2.29.3",
         "date-fns-tz": "^1.3.8",
+        "fast-copy": "^3.0.1",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
         "react-resizable": "^1.8.0",
@@ -108,4 +109,4 @@
         "ts-loader": "^5.4.5",
         "webpackbar": "^5.0.0-3"
     }
-}
+}

packages/semi-ui/tabs/_story/tabs.stories.jsx

@@ -1002,4 +1002,16 @@ export const IconStyle = () => {
         </TabPane>
     </Tabs>
   )
+}
+
+export const Fix2415 = () => {
+  return (
+     <Tabs style={{ width: 250, margin: '20px' }} type="card" collapsible>
+        {[10,2324325324324,1111].map(i => (
+            <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
+                Content of card tab {i}.Quickly click the right arrow and observe that the arrow is disabled correctly.
+            </TabPane>   
+        ))}    
+    </Tabs>
+  )
 }