fix(thought-chain): controlled mode not working

close #590

Author: whitexie

components/thought-chain/__tests__/index.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
+import { fireEvent, render } from '../../../tests/utils';
 import ThoughtChain from '../index';
-import { render, fireEvent } from '../../../tests/utils';
 
+import { CheckCircleOutlined } from '@ant-design/icons';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import themeTest from '../../../tests/shared/themeTest';
-import { CheckCircleOutlined } from '@ant-design/icons';
 
 import type { ThoughtChainItem } from '../index';
 
@@ -84,4 +84,31 @@ describe('ThoughtChain Component', () => {
     fireEvent.click(element as Element);
     expect(onExpand).toHaveBeenCalledWith([]);
   });
+
+  it('ThoughtChain component work with controlled mode', () => {
+    const App = () => {
+      const [expandedKeys] = React.useState<string[]>(['test3']);
+
+      return (
+        <ThoughtChain
+          items={items}
+          collapsible={{
+            expandedKeys,
+          }}
+        />
+      );
+    };
+    const { container } = render(<App />);
+    const element = container.querySelectorAll<HTMLDivElement>(
+      '.ant-thought-chain-item-header-box',
+    )[0];
+
+    fireEvent.click(element as Element);
+
+    const expandBodyElements = container.querySelectorAll<HTMLDivElement>(
+      '.ant-thought-chain-item .ant-thought-chain-item-content',
+    );
+
+    expect(expandBodyElements).toHaveLength(1);
+  });
 });

components/thought-chain/hooks/useCollapsible.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import React from 'react';
 import initCollapseMotion from '../../_util/motion';
 
 import type { CSSMotionProps } from 'rc-motion';
@@ -53,8 +53,12 @@ const useCollapsible: UseCollapsible = (collapsible, prefixCls, rootPrefixCls) =
   }, [collapsible]);
 
   // ============================ ExpandedKeys ============================
-  const [mergedExpandedKeys, setMergedExpandedKeys] =
-    useMergedState<RequiredCollapsibleOptions['expandedKeys']>(customizeExpandedKeys);
+  const [mergedExpandedKeys, setMergedExpandedKeys] = useMergedState<
+    RequiredCollapsibleOptions['expandedKeys']
+  >([], {
+    value: customizeExpandedKeys,
+    onChange: customizeOnExpand,
+  });
 
   // ============================ Event ============================
   const onItemExpand = (curKey: string) => {