Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: always change treeProps.expandedKeys to avoid wrong loadling data #576

Merged
merged 13 commits into from
Oct 24, 2024
9 changes: 8 additions & 1 deletion src/OptionList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,13 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
onKeyUp: () => {},
}));

const loadDataFun = useMemo(
() => searchValue ? null : (loadData as any),
[searchValue, treeExpandedKeys || expandedKeys],
([preSearchValue], [nextSearchValue, nextExcludeSearchExpandedKeys]) =>
preSearchValue !== nextSearchValue && (nextSearchValue || nextExcludeSearchExpandedKeys)
afc163 marked this conversation as resolved.
Show resolved Hide resolved
);

// ========================== Render ==========================
if (memoTreeData.length === 0) {
return (
Expand Down Expand Up @@ -237,7 +244,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
showIcon={showTreeIcon}
switcherIcon={switcherIcon}
showLine={treeLine}
loadData={searchValue ? null : (loadData as any)}
loadData={loadDataFun}
motion={treeMotion}
activeKey={activeKey}
// We handle keys by out instead tree self
Expand Down
94 changes: 63 additions & 31 deletions tests/Select.SearchInput.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,7 @@ describe('TreeSelect.SearchInput', () => {

wrapper.selectNode();
expect(onSearch).not.toHaveBeenCalled();
expect(
wrapper
.find('input')
.first()
.props().value,
).toBeFalsy();
expect(wrapper.find('input').first().props().value).toBeFalsy();
});

it('expandedKeys', () => {
Expand All @@ -51,10 +46,7 @@ describe('TreeSelect.SearchInput', () => {
expect(wrapper.find('NodeList').prop('expandedKeys')).toEqual(['bamboo', 'light']);

function search(value) {
wrapper
.find('input')
.first()
.simulate('change', { target: { value } });
wrapper.find('input').first().simulate('change', { target: { value } });
wrapper.update();
}

Expand Down Expand Up @@ -85,8 +77,8 @@ describe('TreeSelect.SearchInput', () => {
{ id: 1, pId: 0, value: '1', title: 'Expand to load' },
{ id: 2, pId: 0, value: '2', title: 'Expand to load' },
{ id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
])
}
]);
};

const genTreeNode = (parentId, isLeaf = false) => {
const random = Math.random().toString(36).substring(2, 6);
Expand All @@ -100,22 +92,16 @@ describe('TreeSelect.SearchInput', () => {
};

const onLoadData = ({ id, ...rest }) =>
new Promise((resolve) => {
setTimeout(() => {
called += 1;
handleLoadData({ id, ...rest });
setTreeData(
treeData.concat([
genTreeNode(id, false),
genTreeNode(id, true),
genTreeNode(id, true),
])
);
resolve(undefined);
}, 300);
new Promise(resolve => {
called += 1;
handleLoadData({ id, ...rest });
setTreeData(
treeData.concat([genTreeNode(id, false), genTreeNode(id, true), genTreeNode(id, true)]),
);
resolve(undefined);
});

const onChange = (newValue) => {
const onChange = newValue => {
setValue(newValue);
};

Expand All @@ -130,7 +116,6 @@ describe('TreeSelect.SearchInput', () => {
treeData={treeData}
treeNodeFilterProp="title"
showSearch
filterTreeNode={false}
/>
<button onClick={addDefaultTreeData}>设置数据</button>
</>
Expand All @@ -141,10 +126,7 @@ describe('TreeSelect.SearchInput', () => {
expect(handleLoadData).not.toHaveBeenCalled();

function search(value) {
wrapper
.find('input')
.first()
.simulate('change', { target: { value } });
wrapper.find('input').first().simulate('change', { target: { value } });
wrapper.update();
}
search('Tree Node');
Expand All @@ -165,5 +147,55 @@ describe('TreeSelect.SearchInput', () => {
search('');
expect(handleLoadData).not.toHaveBeenCalled();
expect(called).toBe(0);

search('ex');
const nodes = wrapper.find(`[title="${'Expand to load'}"]`).hostNodes();
nodes.first().simulate('click');
expect(called).toBe(0); // should not trrigger all nodes to load data
});

it('should trrigger `loadData` when click node', () => {
let called = 0;
const Demo = () => {
const [value, setValue] = useState();
const onLoadData = ({ id, ...rest }) =>
new Promise(resolve => {
called += 1;
resolve(undefined);
});

const onChange = newValue => {
setValue(newValue);
};

return (
<TreeSelect
treeDataSimpleMode
value={value}
placeholder="Please select"
onChange={onChange}
loadData={onLoadData}
treeData={[
{ id: 1, pId: 0, value: '1', title: 'Expand to load' },
{ id: 2, pId: 0, value: '2', title: 'Expand to load' },
{ id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
]}
treeNodeFilterProp="title"
treeExpandAction="click"
showSearch
/>
);
};
const wrapper = mount(<Demo />);

function search(value) {
wrapper.find('input').first().simulate('change', { target: { value } });
wrapper.update();
}

search('ex');
const nodes = wrapper.find(`[title="${'Expand to load'}"]`).hostNodes();
nodes.first().simulate('click');
expect(called).toBe(1);
});
});
Loading