react-checkbox-tree
react-checkbox-tree copied to clipboard
Allow `expandOnClick` to work without having to define onClick
At the moment, it would appear that defining expandOnClick={true} has no effect unless onClick is also defined. The doc examples indicate this as well.
In our system, we are using the checkbox tree to present files and folders, and only files are selectable. We'd like it if users could click on folders to expand them. But, to do that right now, we'd have to implement onClick. If we set onClick to a no-op func, then folders expand when clicked but we lose the default check-off behavior when users click on files. Really what we want is the default onClick behavior, with the ability for users to click on folders to expand them.
For now, I'm using this workaround but it feels like a kludge because it's basically re-implementing the built-in logic of the component:
render() {
return (
<CheckboxTree
expandOnClick={true}
nodes={nodes}
onClick={
// Begin kludge
(clickedNode) => {
if (clickedNode.showCheckbox && !clickedNode.disabled) {
let newCheckedList;
if (clickedNode.checked) {
newCheckedList = this.state.checked.filter(
(currentValue) => (currentValue !== clickedNode.value)
);
}
else {
newCheckedList = [...this.state.checked, clickedNode.value];
}
this.setState({checked: newCheckedList});
}
}
// End kludge
}
onCheck={(checked) => this.setState({checked})}
onExpand={(expanded) => this.setState({expanded})}
/>
);
}
used onClick={() => null} hack to make it work. But should be fixed IMHO