Custom Object Structure for TreeSelect Value State

[RobinUndersigned]

What problem does this feature solve?

The current implementation only allows the value state for the TreeSelect to be of type string or string[]. In some cases you want to have more information for each selected value. For instance: When building a search UI you might want to add a different search type to each selected value like "and", "or", "not" in order to indicate how the values are going to be used. In that case it would be nice to have the option to store objects in that state like {value: "testValue", type: "and"}

This is different from the fieldNames property since fieldNames only tells the TreeSelect the name of the properties for the TreeNodes not for the state of the currently selected values

So I need the state to look line this:
{
value: [{value: "selectedValue1", type: "and"}, {value: "selectedValue2", type: "or"}, ...]
}

not like this:

{
value: ["selectedValue1", "selectedValue]
}

What does the proposed API look like?

Well there should by a possibility to tell the component which property of the value state object is going to be the label value within the value state where the selected values are stored NOT the fieldNames of the Treenodes. So it is similar to the fieldNames Property but not for the Nodes of the tree. It should work for the selected values instead

[github-actions]

You may look for issues:

1. 100% Custom Object Structure for TreeSelect Value State #36709
2. 56% onClear triggers onDeselect for all selected values #33790

_{🤖 By issues-similarity-analysis}

[zombieJ]

What's treeData look like?

[RobinUndersigned]

@zombieJ
Each object for the tree looks either like this:
{title, value}

or if it has children in looks like this:
{title, value, children}

Displaying the tree in the dropdown isn't the problem. But under my Tree Select I have three radio buttons which indicate if the selected value will be a "search AND", "search OR", or "search NOT" value. but I can only store strings in the selected value state. As you can see in the documentation the "value" attribute for TreeSelect can only be String or String[]
https://ant.design/components/tree-select/

But I need a possibility to pass my custom object like
{value: "selectedValue1", type: "and"}
in there and a way to tell the component that the label for the Tag in the Inputfield comes from that object's value property.

[zombieJ]

Could you provide a screenshot for this?

[RobinUndersigned]

Sure. This is the kind of search Filter I want to build. This was built using the normal Input Component with the Autocomplete component.
But I want the user to select an Option from the treeselect. The State for the tags contains three objects in that particular case:
{searchTerm: "twitter", searchType: "and"} {searchTerm: "heise", searchType: "not"} {searchTerm: "facebook", searchType: "or"}

But When selecting values from the treeselect it only returns string or an array of strings, so I can't add the searchType property right now. As I said before when passing the value containing the state for the selected options I can only pass string oder array of strings to the component.

[RuFi2k]

Hi @RobinUndersigned

Looks like You're trying to combine 2 components - TreeSelect and Radio, which is not applicable for atomic components design, so you need to combine the state and link them together by using Native JavaScript/TypeScript (depends on your needs). Here's an example I made to get familiar with on Code Sandbox

CC: @zombieJ @afc163

[RobinUndersigned]

@RuFi2k wow thank you so much! Learned a lot looking at that example :)