Parent nodes with empty array as children are checked by default
See original GitHub issueDescribe the bug
Now that the children
property can be an empty array, when the tree renders, if a parent node has an empty array as children then it is rendered as a checked node by default and cannot be unchecked. The issue probably has to do with isEveryChildChecked
function, as it will return true if the array provided is empty.
Reproduction steps Having modified the below example to have a node that has no children (eg Neptune), in version 1.5.1, the node renders as an unchecked node with no option to expand it since there are no children to show. In version 1.6.0 however, the node renders as a checked node with the arrow on the left to expand it, even though there are no children to show. In addition, when you try to uncheck it that doesn’t work.
Link to codesandbox example
import React from 'react';
import CheckboxTree from 'react-checkbox-tree';
import 'react-checkbox-tree/lib/react-checkbox-tree.css';
const nodes = [{
value: 'mars',
label: 'Mars',
children: [
{ value: 'phobos', label: 'Phobos' },
{ value: 'deimos', label: 'Deimos' },
],
},
{
value: 'neptune',
label: 'Neptune',
children: [],
}];
class Widget extends React.Component {
state = {
checked: [],
expanded: [],
};
onCheck = (checked) => {
this.setState({ checked });
};
onExpand = (expanded) => {
this.setState({ expanded });
};
render() {
const { checked, expanded } = this.state;
return (
<CheckboxTree
nodes={nodes}
checked={checked}
expanded={expanded}
onCheck={this.onCheck}
onExpand={this.onExpand}
/>
);
}
}
export default Widget;
Expected behavior The expected behaviour would be to render the parent component unchecked by default when there is an empty array provided as children.
Screenshots Version 1.6.0 result - Parent node renders as checked by default if there are no children (current behaviour)
Version 1.5.1 result - Parent node renders as unchecked by default with no option to expand it (expected behaviour)
Issue Analytics
- State:
- Created 3 years ago
- Reactions:6
- Comments:10 (2 by maintainers)
Top GitHub Comments
Can this ticket please get an fast update or priority improvement, maybe as a solution for 1.6.1? We use the checkbox tree for a lazy loading file tree with reload of folders open expand. Because of that we have to use empty arrays inside the new item:
{ value: item.value, label: item.label, children: [], }
Implemented a fix in 4f69c32075e8261d5df97b41d1604af40198c03c. I recognize the use case of lazy-loading child nodes and where it would be valuable to show the expand icon and load children after it has been toggled.
For context, in v1.5.1, a node with an empty
children
array was treated like a leaf. I did not recreate that behavior here. In this recent change, it is treated as a parent but without children. Thus, it will render the expand/collapse icons. It now defaults to unchecked, as it no longer relies onArray.isEvery
(which would always returntrue
when using an empty array).This will also allow you to toggle the check state of an empty parent node. However, please note that if you add children after checking a parent node (such as through the
onExpand
handler), it is up to you to either remove that node value from thechecked
array or expandchecked
to include all new children. This component will be unable to automatically apply checked status to children added after the fact.@nikhil377 No timeline for a release date yet. I have a bit of breathing room this week, so I intend to quash a few issues in the coming days. If you desire this change now, you are welcome to point your
package.json
to the specific commit (4f69c32075e8261d5df97b41d1604af40198c03c).