Weird behavior from Checkbox tree

App Building
1

I want to use a checkbox tree to exclude a list of resources from either or both of two options (Time Entry and Billables Race). However, any time I select the person under Time Entry, it also selects them from Billables Race.

I want to be able to independently exclude them from only one option. For example, exclude them from the Billables Race, but still require them to enter time. Why can I not seem to get this to work? Below is my code which generates the JSON for the checkbox tree.

image

var optionChildren = allResources.map( resource => {
return {
label: resource,
value: resource,
};
});

var optionTree = ["Time Entry", "Billables Race"].map( option => {

/* The reason why I am rebuilding this, is so that I am not pointing to the same data
* I thought that might be the reason for the weird behavior, but it didn't seem to help */

var children = optionChildren.map( child => {
return {
label: child.label,
value: child.value,
}
});
return {
label: option,
value: option,
children: children,
};
});

return optionTree;

2

Very interesting!

Examining the state of the checkboxTree component with this setup shows that there is actually only one option "checked":

image
image725×958 62.6 KB

I think the issue may stem from the fact that is identifying the child as a single object (not necessarily a single reference) by value name. i.e. there isn't checked state on the item's value in the tree but a lookup of "value" based on what is "checked" -- Now, there is a checkedPathArray that shows the correct selection (I made the Time Entry check, and the Billables Race entry was the ghost checkmark) but I don't think this is something that you can workaround without changing the value property of the child when creating the tree.

4

We are looking into a bug where all children labels having the same value get checked if only 1 is clicked, so I'll let you know if our team ships a fix

5

Hi Tess!
I'm trying to use the checkbox tree, but it seems the issue persists when handling the same naming across different children but for different parents.

Also, it has a weird behaviour when trying to select and unselect options regardless the parent.

Do you have an estimated time to solve this issue?

thanks!

6

Unfortunately, no eta yet :disappointed: I'll add your +1!

1 Like
7

Thank you!