-
Notifications
You must be signed in to change notification settings - Fork 136
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How do you implement controlled select? #243
Comments
Okay, so I got around this with a little hack if you will. <Tree
ref={treeRef}
data={data}
disableDrag
disableMultiSelection={false}
className="selection-tree"
onSelect={handleSelect}
>
{(props) => <Node isSelected={isSelected} setIsSelected={setIsSelected} {...props} />}
</Tree> |
Yes, that's exactly what I did as well. Basically I manage the whole
selected state myself, instead of using the built-in one.
…On Wed, 29 May 2024 at 14:59, Pancham Khaitan ***@***.***> wrote:
Okay, so I got around this with a little hack if you will.
I overrode the props of the Node and passed a locally maintained state to
the checkbox.
<Tree
ref={treeRef}
data={data}
disableDrag
disableMultiSelection={false}
className="selection-tree"
onSelect={handleSelect}>
{(props) => <Node isSelected={isSelected} setIsSelected={setIsSelected} {...props} />}</Tree>
—
Reply to this email directly, view it on GitHub
<#243 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AADYVD3MPTSHVSRRJ3G2M4TZEXGKHAVCNFSM6AAAAABGE4G2I6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZXGM2TMMZQGE>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
@Pancham97 Can you give a little more detail on this? Been struggling with implementing a solution for a bit now. I'm not sure why you're passing in Thanks |
@Joshlha yeah pretty much. Since React Arborist wouldn't maintain the state of selection, I made my own state using useState and pass the state and the setter as props. Whenever the checkbox is selected, it calls the setState method. I could whip up a small code gist if you want. |
@Pancham97 I think I get what you're saying. I would imagine that A code sample would be extremely helpful! I've been fighting with the built-in selection management provided by the tree and it's just not very flexible. |
@Joshlha I agree. Here's something that I might have done. I do not have the exact piece of code because I didn't think this was an elegant use of a tree. For my use-case, I went with the standard accordions since that fit my need better. function Node({ isSelected, setIsSelected, ...props }) {
return (
<input
type="checkbox"
checked={isSelected}
onChange={() => setIsSelected(!isSelected)}
{...props}
/>
);
}
function Parent() {
const [isSelected, setIsSelected] = React.useState(false);
return (
<Tree
ref={treeRef}
data={data}
disableDrag
disableMultiSelection={false}
className="selection-tree"
onSelect={handleSelect}
>
{(props) => (
<Node
isSelected={isSelected}
setIsSelected={setIsSelected}
{...props}
/>
)}
</Tree>
);
} |
I'm using this in a controlled way. My problem is that it seems it's not possible to do a controlled select.
I mean the whole component is controlled, but select is going through a spaghetti (in my case) of onSelect + treeAPI.deselectAll() + treeApi.selectMulti().
But then it can get in an infinite loop, with a selectMulti triggering onSelect, etc. triggering selectMulti, etc.
Normally in React these are solved by controlled components. In Arborist's case, it'd be something like a selectedMap={} property, which takes a Map of selected id and selects them.
How do you solve this problem?
The text was updated successfully, but these errors were encountered: