react-checkbox-tree
react-checkbox-tree copied to clipboard
Doesn't cascade down during serialization process
Describe the bug The root checkbox won't be fully checked if it is in [checked] list .
Reproduction steps
If i were to put 'mars' in checked list, instead of get fully checked state , it is not checked at all.
- Current

const nodes = [
{
value: "mars",
label: "Mars",
children: [
{ value: "phobos", label: "Phobos" },
{ value: "deimos", label: "Deimos" },
{
value: "mars-1",
label: "Mars",
children: [
{ value: "phobos-1", label: "Phobos" },
{ value: "deimos-1", label: "Deimos" }
]
}
]
}
];
class Widget extends React.Component {
state = {
checked: ["mars"],
expanded: []
};
render() {
return (
<>
<CheckboxTree
nodes={nodes}
checked={this.state.checked}
expanded={this.state.expanded}
onCheck={(checked) => this.setState({ checked })}
onExpand={(expanded) => this.setState({ expanded })}
/>
<div>{JSON.stringify(this.state.checked)}</div>
</>
);
}
}
Expected behavior

My solution
// [file]: NodeModel.js
// Deserialize values and set their nodes to true
listKeys.forEach((listKey) => {
lists[listKey].forEach((value) => {
if (this.flatNodes[value] !== undefined) {
this.flatNodes[value][listKey] = true;
}
if(listKey === 'checked') {
const {noCascade, checkModel} = this.props;
// !!!! ----- add cascade down process here -----
this.flatNodes[value].children.forEach((child) => {
this.toggleChecked(child, true, checkModel, noCascade, false);
});
}
});
});
Thanks for the report.
Unfortunately, this is because the default checkbox model only tracks leaf nodes in the checked array. Any parent nodes are effectively ignored. It would make sense to allow the render cascade selections, potentially like how your solution works, but that could cause weird situations when unchecking the child of a checked parent.