diff --git a/examples/panel.tsx b/examples/panel.tsx
index c0c51353..1bfb2417 100644
--- a/examples/panel.tsx
+++ b/examples/panel.tsx
@@ -99,6 +99,7 @@ export default () => {
setValue2(nextValue);
}}
disabled={disabled}
+ defaultActiveKey={['bj', 'haidian']}
/>
diff --git a/src/Cascader.tsx b/src/Cascader.tsx
index cf895819..5a66dee1 100644
--- a/src/Cascader.tsx
+++ b/src/Cascader.tsx
@@ -159,7 +159,7 @@ export interface CascaderProps<
value: GetValueType,
selectOptions: OptionType[],
) => void;
- defaultActiveValueCells?: React.Key[];
+ defaultActiveKey?: React.Key[];
}
export type SingleValueType = (string | number)[];
@@ -176,7 +176,7 @@ export type InternalCascaderProps = Omit void;
- defaultActiveValueCells?: React.Key[];
+ defaultActiveKey?: React.Key[];
};
export type CascaderRef = Omit;
diff --git a/src/OptionList/List.tsx b/src/OptionList/List.tsx
index 3c63432b..e4f21ba5 100644
--- a/src/OptionList/List.tsx
+++ b/src/OptionList/List.tsx
@@ -29,7 +29,7 @@ export type RawOptionListProps = Pick<
| 'direction'
| 'open'
| 'disabled'
-> & { defaultActiveValueCells?: React.Key[]; };
+> & { defaultActiveKey?: React.Key[]; };
const RawOptionList = React.forwardRef((props, ref) => {
const {
@@ -41,7 +41,7 @@ const RawOptionList = React.forwardRef((
direction,
open,
disabled,
- defaultActiveValueCells,
+ defaultActiveKey,
} = props;
const containerRef = React.useRef(null);
@@ -106,7 +106,7 @@ const RawOptionList = React.forwardRef((
const halfCheckedSet = React.useMemo(() => new Set(toPathKeys(halfValues)), [halfValues]);
// ====================== Accessibility =======================
- const [activeValueCells, setActiveValueCells] = useActive(multiple, open);
+ const [activeValueCells, setActiveValueCells] = useActive(multiple, open, defaultActiveKey);
// =========================== Path ===========================
const onPathOpen = (nextValueCells: React.Key[]) => {
@@ -116,12 +116,6 @@ const RawOptionList = React.forwardRef((
internalLoadData(nextValueCells);
};
- React.useEffect(() => {
- if (defaultActiveValueCells && defaultActiveValueCells?.length > 0) {
- setActiveValueCells(defaultActiveValueCells)
- }
- }, [defaultActiveValueCells]);
-
const isSelectable = (option: DefaultOptionType) => {
if (disabled) {
return false;
diff --git a/src/OptionList/useActive.ts b/src/OptionList/useActive.ts
index ca0519ec..513464f3 100644
--- a/src/OptionList/useActive.ts
+++ b/src/OptionList/useActive.ts
@@ -7,6 +7,7 @@ import CascaderContext from '../context';
const useActive = (
multiple?: boolean,
open?: boolean,
+ defaultActiveKey?: React.Key[],
): [React.Key[], (activeValueCells: React.Key[]) => void] => {
const { values } = React.useContext(CascaderContext);
@@ -14,7 +15,7 @@ const useActive = (
// Record current dropdown active options
// This also control the open status
- const [activeValueCells, setActiveValueCells] = React.useState([]);
+ const [activeValueCells, setActiveValueCells] = React.useState(defaultActiveKey ?? []);
React.useEffect(
() => {
diff --git a/src/Panel.tsx b/src/Panel.tsx
index 279f2510..8bdaed40 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -71,7 +71,7 @@ export default function Panel<
direction,
notFoundContent = 'Not Found',
disabled,
- defaultActiveValueCells
+ defaultActiveKey,
} = props as Pick;
// ======================== Multiple ========================
diff --git a/tests/Panel.spec.tsx b/tests/Panel.spec.tsx
index 1408e30b..ad917dc0 100644
--- a/tests/Panel.spec.tsx
+++ b/tests/Panel.spec.tsx
@@ -79,14 +79,14 @@ describe('Cascader.Panel', () => {
expect(onChange).toHaveBeenCalledWith([['bamboo', 'little']], expect.anything());
});
- it('multiple with defaultActiveValueCells', () => {
+ it('multiple with defaultActiveKey', () => {
const onChange = jest.fn();
const { container } = render(
,
);
expect(container.querySelectorAll('.rc-cascader-menu')).toHaveLength(2);
diff --git a/tests/selector.spec.tsx b/tests/selector.spec.tsx
index e7387714..dbd92540 100644
--- a/tests/selector.spec.tsx
+++ b/tests/selector.spec.tsx
@@ -5,10 +5,10 @@ import Cascader from '../src';
import { addressOptions } from './demoOptions';
// Mock `useActive` hook
-jest.mock('../src/OptionList/useActive', () => (multiple: boolean, open: boolean) => {
+jest.mock('../src/OptionList/useActive', () => (multiple: boolean, open: boolean, defaultActiveKey: React.Key[]) => {
// Pass to origin hooks
const originHook = jest.requireActual('../src/OptionList/useActive').default;
- const [activeValueCells, setActiveValueCells] = originHook(multiple, open);
+ const [activeValueCells, setActiveValueCells] = originHook(multiple, open, defaultActiveKey);
(global as any).activeValueCells = activeValueCells;