[TreeSelect] 可搜索,异步加载数据的 TreeSelect,选择选项后,选项展开异常
YyumeiZhang opened this issue · comments
YyumeiZhang commented
Is there an existing issue for this?
- I have searched the existing issues
Which Component
TreeSelect
Semi Version
2.56.1
Current Behavior
Expected Behavior
单选,点击选项后,面板收起,再次打开面板,被选选项不会展开,显示正常
Steps To Reproduce
- 点击触发器 trigger ,选项面板打开
- 选择第一项,因为是单选,选择后,面板会自动收起
- 再次点击触发器 trigger ,选项面板打开,可以看到第一项是意外展开的,因为是远程加载数据,子项还没有加载上,所以处以一个展开了,但是没有子项的情况
ReproducibleCode
import React, { useState } from 'react';
import { TreeSelect } from '@douyinfe/semi-ui';
() => {
const initialData = [
{
label: 'Expand to load',
value: '0',
key: '0',
},
{
label: 'Expand to load',
value: '1',
key: '1',
},
{
label: 'Leaf Node',
value: '2',
key: '2',
isLeaf: true,
},
];
const [treeData, setTreeData] = useState(initialData);
function updateTreeData(list, key, children) {
return list.map(node => {
if (node.key === key) {
return { ...node, children };
}
if (node.children) {
return { ...node, children: updateTreeData(node.children, key, children) };
}
return node;
});
}
function onLoadData({ key, children }) {
return new Promise(resolve => {
if (children) {
resolve();
return;
}
setTimeout(() => {
setTreeData(origin =>
updateTreeData(origin, key, [
{
label: 'Child Node',
key: `${key}-0`,
},
{
label: 'Child Node',
key: `${key}-1`,
},
]),
);
resolve();
}, 1000);
});
}
return (
<TreeSelect
filterTreeNode
loadData={onLoadData}
treeData={treeData}
style={{ width: 300 }}
placeholder="请选择"
/>
);
};
Environment
- OS:
- browser:
Anything else?
No response