fix: Fixed an issue with the abnormal expansion behavior of Tree/TreeSelect/collapsible in some Chrome versions(v140,v141,v142), pick #3006

packages/semi-ui/collapsible/index.tsx

@@ -9,7 +9,7 @@ import BaseComponent from "../_base/baseComponent";
 import PropTypes from "prop-types";
 import cls from "classnames";
 import { cssClasses } from "@douyinfe/semi-foundation/collapsible/constants";
-import { isEqual } from "lodash";
+import { isEqual, pick } from "lodash";
 import "@douyinfe/semi-foundation/collapsible/collapsible.scss";
 
 interface CollapsibleProps extends CollapsibleFoundationProps {
@@ -30,7 +30,8 @@ interface CollapsibleState extends CollapsibleFoundationState {
     domInRenderTree: boolean;
     domHeight: number;
     visible: boolean;
-    isTransitioning: boolean
+    isTransitioning: boolean;
+    cacheIsOpen: boolean
 }
 
 class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
@@ -52,7 +53,8 @@ class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
             domInRenderTree: false,
             domHeight: 0,
             visible: this.props.isOpen,
-            isTransitioning: false
+            isTransitioning: false,
+            cacheIsOpen: this.props.isOpen
         };
         this.foundation = new CollapsibleFoundation(this.adapter);
     }
@@ -83,6 +85,21 @@ class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
         };
     }
 
+    static getDerivedStateFromProps(props: CollapsibleProps, prevState: CollapsibleState) {
+        const newState: Partial<CollapsibleState> = {};
+        const isOpenChanged = props.isOpen !== prevState.cacheIsOpen;
+        if (isOpenChanged) {
+            if (props.isOpen || !props.motion) {
+                newState.visible = props.isOpen;
+            }
+        }
+        if (props.motion && isOpenChanged) {
+            newState.isTransitioning = true;
+        }
+        newState.cacheIsOpen = props.isOpen;
+        return newState;
+    }
+
     static getEntryInfo = (entry: ResizeObserverEntry) => {
         //judge whether parent or self display none
         let inRenderTree: boolean;
@@ -117,24 +134,14 @@ class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
     }
 
     componentDidUpdate(prevProps: Readonly<CollapsibleProps>, prevState: Readonly<CollapsibleState>, snapshot?: any) {
-        const changedPropKeys = Object.keys(this.props).filter(key => !isEqual(this.props[key], prevProps[key]));
-        const changedStateKeys = Object.keys(this.state).filter(key => !isEqual(this.state[key], prevState[key]));
+        const changedPropKeys = Object.keys(pick(this.props, ['reCalcKey'])).filter(key => !isEqual(this.props[key], prevProps[key]));
+        const changedStateKeys = Object.keys(pick(this.state, ['domInRenderTree'])).filter(key => !isEqual(this.state[key], prevState[key]));
         if (changedPropKeys.includes("reCalcKey")) {
             this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
         }
         if (changedStateKeys.includes("domInRenderTree") && this.state.domInRenderTree) {
             this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
         }
-        if (changedPropKeys.includes("isOpen")) {
-            if (this.props.isOpen || !this.props.motion) {
-                this.foundation.updateVisible(this.props.isOpen);
-            }
-        }
-
-        if (this.props.motion && (prevProps.isOpen !== this.props.isOpen)) {
-            this.foundation.updateIsTransitioning(true);
-        }
-
     }
 
     componentWillUnmount() {