How to implement a dropdown tree?

[lostluna1]

in my code:

import * as React from "react";
import {
    Combobox,
    makeStyles,
    Option,
    useId,
    ComboboxProps,
} from "@fluentui/react-components";
import { Tree, TreeItem, TreeItemLayout } from "@fluentui/react-components";

const useStyles = makeStyles({
    root: {
        display: "grid",
        gridTemplateRows: "repeat(1fr)",
        justifyItems: "start",
        gap: "2px",
        maxWidth: "400px",
    },
    dropdownContent: {
        maxHeight: "200px",
        overflowY: "auto",
    },
});

interface TreeNode {
    label: string;
    children?: TreeNode[];
}

interface DropdownTreeProps extends Partial<ComboboxProps> {
    treeData: TreeNode[];
    allowParentSelection?: boolean; // 新增属性
}

export const DropdownTree: React.FC<DropdownTreeProps> = ({ treeData, allowParentSelection = false, ...props }) => {
    const comboId = useId("combo-dropdown-tree");
    const styles = useStyles();
    const [isOpen, setIsOpen] = React.useState(false);
    const [selectedValue, setSelectedValue] = React.useState<string>("");

    const handleTreeItemClick = (label: string) => {
        setSelectedValue(label);
        setIsOpen(false);
    };

    const renderTree = (nodes: TreeNode[]) => {
        return nodes.map((node, index) => (
            <TreeItem
                key={index}
                itemType={node.children ? "branch" : "leaf"}
                onClick={() => handleTreeItemClick(node.label)}
            >
                <TreeItemLayout>{node.label}</TreeItemLayout>
                {node.children && <Tree>{renderTree(node.children)}</Tree>}
            </TreeItem>
        ));
    };

    return (
        <div className={styles.root}>
            <label id={comboId}>Select an item</label>
            <Combobox
                aria-labelledby={comboId}
                placeholder="Select an item"
                onClick={() => setIsOpen(!isOpen)}
                value={selectedValue}
                open={isOpen}
                onOpenChange={(e, data) => setIsOpen(data.open)}
                {...props}
            >
                <div className={styles.dropdownContent}>
                    <Tree aria-label="Dropdown Tree">
                        {renderTree(treeData)}
                    </Tree>
                </div>
            </Combobox>
        </div>
    );
};

However, based on my current implementation, I am unable to control the unfolding/folding of the Tree when the dropdown menu is expanded.

[lostluna1]

More precisely, when I click on the expand/collapse area of the Tree, it will trigger the selected event in the drop-down menu.

[lostluna1]

import * as React from "react";
import {
    Combobox,
    makeStyles,
    Option,
    useId,
    ComboboxProps,
    TreeOpenChangeData,
    TreeOpenChangeEvent,
    TreeItemValue,
} from "@fluentui/react-components";
import { Tree, TreeItem, TreeItemLayout } from "@fluentui/react-components";

const useStyles = makeStyles({
    root: {
        display: "grid",
        gridTemplateRows: "repeat(1fr)",
        justifyItems: "start",
        gap: "2px",
        maxWidth: "400px",
    },
    dropdownContent: {
        maxHeight: "200px",
        overflowY: "auto",
    },
});

interface TreeNode {
    label: string;
    children?: TreeNode[];
}

interface DropdownTreeProps extends Partial<ComboboxProps> {
    treeData: TreeNode[];
    allowParentSelection?: boolean; 
    onTreeSelect?: (value: string) => void; 
}

export const DropdownTree: React.FC<DropdownTreeProps> = ({ treeData, allowParentSelection = false, onTreeSelect, ...props }) => {
    const comboId = useId("combo-dropdown-tree");
    const styles = useStyles();
    const [isOpen, setIsOpen] = React.useState(false);
    const [selectedValue, setSelectedValue] = React.useState<string>("");
    const handleTreeItemClick = (label: string) => {
        setSelectedValue(label);
        setIsOpen(false);
        if (onTreeSelect) {
            onTreeSelect(label);
        }
    };

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setSelectedValue(e.target.value);
    };

    const renderTree = (nodes: TreeNode[]) => {
        return nodes.map((node, index) => (
            <TreeItem
                key={index}
                itemType={node.children ? "branch" : "leaf"}
                onClick={() => handleTreeItemClick(node.label)}
            >
                <TreeItemLayout>{node.label}</TreeItemLayout>
                {node.children && <Tree>{renderTree(node.children)}</Tree>}
            </TreeItem>
        ));
    };

    const handleTreeClick: React.MouseEventHandler<HTMLDivElement> = (e) => {
        const target = e.target as HTMLElement;
        const treeItem = target.closest('[role="treeitem"]');
        if (treeItem) {
            const isExpandCollapseButton = target.tagName === 'svg' || target.closest('svg');
            if (!isExpandCollapseButton) {
                console.log(123); 
            } else {
                setIsOpen(true);
            }
        }
    };
    return (
        <div className={styles.root}>
            <Combobox
                aria-labelledby={comboId}
                placeholder="Select an item"
                value={selectedValue}
                open={isOpen}
                onOpenChange={(e, data) => setIsOpen(data.open)}
                onChange={handleInputChange}
                {...props}
            >
                <div className={styles.dropdownContent}>
                    <Tree onClick={handleTreeClick}  aria-label="Dropdown Tree">
                        {renderTree(treeData)}
                    </Tree>
                </div>
            </Combobox>
        </div>
    );
};