Skip to content

Commit

Permalink
fix: TreeSlect will trigger loadData when clearing the search (#424)
Browse files Browse the repository at this point in the history
  • Loading branch information
edc-hui authored Nov 17, 2022
1 parent 46846d1 commit 0c34fe0
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 5 deletions.
3 changes: 1 addition & 2 deletions src/utils/valueUtil.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,9 @@ export function getAllKeys(treeData: DefaultOptionType[], fieldNames: InternalFi

function dig(list: DefaultOptionType[]) {
list.forEach(item => {
keys.push(item[fieldNames.value]);

const children = item[fieldNames.children];
if (children) {
keys.push(item[fieldNames.value]);
dig(children);
}
});
Expand Down
96 changes: 95 additions & 1 deletion tests/Select.SearchInput.spec.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-disable no-undef */
import React from 'react';
import React, { useEffect, useState } from 'react';
import { mount } from 'enzyme';
import TreeSelect, { TreeNode } from '../src';

Expand Down Expand Up @@ -72,4 +72,98 @@ describe('TreeSelect.SearchInput', () => {
search('');
expect(listProps().expandedKeys).toEqual(['bamboo', 'light']);
});

it('not trigger loadData when clearing the search', () => {
let called = 0;
const handleLoadData = jest.fn();
const Demo = () => {
const [value, setValue] = useState();
const [treeData, setTreeData] = useState([]);

const addDefaultTreeData = () => {
setTreeData([
{ 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);
return {
id: random,
pId: parentId,
value: random,
title: isLeaf ? 'Tree Node' : 'Expand to load',
isLeaf,
};
};

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);
});

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

return (
<>
<TreeSelect
treeDataSimpleMode
value={value}
placeholder="Please select"
onChange={onChange}
loadData={onLoadData}
treeData={treeData}
treeNodeFilterProp="title"
showSearch
filterTreeNode={false}
/>
<button onClick={addDefaultTreeData}>设置数据</button>
</>
);
};
const wrapper = mount(<Demo />);
expect(wrapper.find('button').length).toBe(1);
expect(handleLoadData).not.toHaveBeenCalled();

function search(value) {
wrapper
.find('input')
.first()
.simulate('change', { target: { value } });
wrapper.update();
}
search('Tree Node');
expect(handleLoadData).not.toHaveBeenCalled();

search('');
expect(handleLoadData).not.toHaveBeenCalled();

expect(wrapper.find('.rc-tree-select-empty').length).toBe(1);

wrapper.find('button').simulate('click');
expect(wrapper.find('.rc-tree-select-empty').length).toBe(0);
expect(wrapper.find('.rc-tree-select-tree').length).toBe(1);

search('Tree Node');
expect(handleLoadData).not.toHaveBeenCalled();

search('');
expect(handleLoadData).not.toHaveBeenCalled();
expect(called).toBe(0);
});
});
4 changes: 2 additions & 2 deletions tests/__snapshots__/Select.spec.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -1042,7 +1042,7 @@ exports[`TreeSelect.basic search nodes filter node but not remove then 1`] = `
>
<div
aria-grabbed="false"
class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open filter-node"
class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close filter-node"
draggable="false"
>
<span
Expand All @@ -1068,7 +1068,7 @@ exports[`TreeSelect.basic search nodes filter node but not remove then 1`] = `
</div>
<div
aria-grabbed="false"
class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last"
draggable="false"
>
<span
Expand Down

1 comment on commit 0c34fe0

@vercel
Copy link

@vercel vercel bot commented on 0c34fe0 Nov 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.