fix: only compare key to determine whether to update the item #1456 #1502 (#1600)

cypress/integration/tabs.spec.js

@@ -82,4 +82,22 @@ describe('tabs', () => {
         cy.get('[id=semiTab1]').type('{backspace}');
         cy.get('[id=semiTab1]').should('not.exist');
     });
+
+    it('collapsible', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=tabs--fix-1456&args=&viewMode=story');
+
+        // Ensure the correctness of the dropdown item after selection
+        cy.get('[id=semiTab2]').click();
+        cy.get('.semi-button').eq(1).trigger('mouseover');
+        cy.get('.semi-dropdown-content .semi-dropdown-item').contains('tab-7').should('exist');
+        cy.get('li span').contains('Tab-0').should('not.exist');
+        
+        cy.get('.semi-button').eq(1).trigger('mouseout');
+
+        // Make sure that the state of the button does not change after vertical scrolling makes the tabs obscured
+        cy.get('.semi-button').eq(2).click();
+        cy.get('[id=wrapper]').scrollTo(0, 40);
+        cy.get('.semi-button-disabled').eq(0).should('exist');
+        cy.get('.semi-tabs-bar-arrow .semi-button-primary').eq(0).should('exist');
+    });
 });

packages/semi-ui/overflowList/index.tsx

@@ -170,8 +170,15 @@ class OverflowList extends BaseComponent<OverflowListProps, OverflowListState> {
 
     componentDidUpdate(prevProps: OverflowListProps, prevState: OverflowListState): void {
 
+        const prevItemsKeys = prevProps.items.map((item) =>
+            item.key
+        );
+        const nowItemsKeys = this.props.items.map((item) =>
+            item.key
+        );
 
-        if (!isEqual(prevProps.items, this.props.items)) {
+        // Determine whether to update by comparing key values
+        if (!isEqual(prevItemsKeys, nowItemsKeys)) {
             this.itemRefs = {};
             this.setState({ visibleState: new Map() });
         }

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

@@ -963,3 +963,27 @@ export const TabItem = () => {
     ))}
   </div>)
 }
+
+
+export const Fix1456 = () =>{
+  const [key, setKey] = useState([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
+
+  return (
+        <div id='wrapper' style={{ height: 300, overflowY: 'scroll' }}>
+          <div style={{ height: 500 }}>
+          <Tabs style={{ width: '300px', margin: '20px' }} type="card" collapsible>
+            {key.map(i => (
+              <TabPane tab={`tab-${i}`} itemKey={`${i}`} key={i}>
+                  Content of card tab {i}
+              </TabPane>
+            ))}
+          </Tabs>
+          <Button onClick={()=>{setKey([8, 9, 10, 11, 12, 13, 14, 15])}}>change key</Button>
+        </div>
+        </div>
+  );
+}
+
+Fix1456.story = {
+  name: 'Fix-1456',
+};