DouyinFE / semi-design

🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2800+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click

Home Page:https://semi.design

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[TreeSelect] 可搜索,异步加载数据的 TreeSelect,选择选项后,选项展开异常

YyumeiZhang opened this issue · comments

Is there an existing issue for this?

  • I have searched the existing issues

Which Component

TreeSelect

Semi Version

2.56.1

Current Behavior

20240417195615_rec_

Expected Behavior

单选,点击选项后,面板收起,再次打开面板,被选选项不会展开,显示正常
image

Steps To Reproduce

  1. 点击触发器 trigger ,选项面板打开
  2. 选择第一项,因为是单选,选择后,面板会自动收起
  3. 再次点击触发器 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