Merge branch 'v1.8-dev'

Author: jakezatecky

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## v1.8.0 (TBA)
+
+### Bug Fixes
+
+* [#258]: Fix check behavior on nodes with an empty `children` array
+
 ## [v1.7.2](https://github.com/jakezatecky/react-checkbox-tree/compare/v1.7.1...v1.7.2) (2021-08-09)
 
 ### Bug Fixes

src/js/CheckboxTree.js

@@ -183,7 +183,8 @@ class CheckboxTree extends React.Component {
     determineShallowCheckState(node, noCascade) {
         const flatNode = this.state.model.getNode(node.value);
 
-        if (flatNode.isLeaf || noCascade) {
+        if (flatNode.isLeaf || noCascade || node.children.length === 0) {
+            // Note that an empty parent node tracks its own state
             return flatNode.checked ? 1 : 0;
         }
 

src/js/NodeModel.js

@@ -138,7 +138,8 @@ class NodeModel {
 
             this.toggleNode(node.value, 'checked', isChecked);
         } else {
-            if (modelHasParents) {
+            // Toggle parent check status if the model tracks this OR if it is an empty parent
+            if (modelHasParents || flatNode.children.length === 0) {
                 this.toggleNode(node.value, 'checked', isChecked);
             }
 

test/CheckboxTree.js

@@ -336,7 +336,7 @@ describe('<CheckboxTree />', () => {
             );
         });
 
-        it('should render a node with no "children" array as a leaf', () => {
+        it('should render a node with no `children` array as a leaf', () => {
             const wrapper = shallow(
                 <CheckboxTree
                     nodes={[
@@ -349,7 +349,7 @@ describe('<CheckboxTree />', () => {
             assert.equal(true, wrapper.find(TreeNode).prop('isLeaf'));
         });
 
-        it('should render a node with an empty "children" array as a parent', () => {
+        it('should render a node with an empty `children` array as a parent', () => {
             const wrapper = shallow(
                 <CheckboxTree
                     nodes={[
@@ -366,7 +366,24 @@ describe('<CheckboxTree />', () => {
             assert.equal(false, wrapper.find(TreeNode).prop('isLeaf'));
         });
 
-        it('should render a node with a non-empty "children" array as a parent', () => {
+        // https://github.com/jakezatecky/react-checkbox-tree/issues/258
+        it('should render a node with an empty `children` array as unchecked by default', () => {
+            const wrapper = shallow(
+                <CheckboxTree
+                    nodes={[
+                        {
+                            value: 'jupiter',
+                            label: 'Jupiter',
+                            children: [],
+                        },
+                    ]}
+                />,
+            );
+
+            assert.equal(false, wrapper.find(TreeNode).prop('checked'));
+        });
+
+        it('should render a node with a non-empty `children` array as a parent', () => {
             const wrapper = shallow(
                 <CheckboxTree
                     nodes={[
@@ -734,6 +751,38 @@ describe('<CheckboxTree />', () => {
             assert.deepEqual(['io', 'europa'], actualChecked);
         });
 
+        // https://github.com/jakezatecky/react-checkbox-tree/issues/258
+        it('should toggle a node with an empty `children` array', () => {
+            let actualChecked = {};
+            const makeEmptyParentNode = (checked) => (
+                mount(
+                    <CheckboxTree
+                        nodes={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [],
+                            },
+                        ]}
+                        checked={checked}
+                        onCheck={(node) => {
+                            actualChecked = node;
+                        }}
+                    />,
+                )
+            );
+
+            // Unchecked to checked
+            let wrapper = makeEmptyParentNode([]);
+            wrapper.find('TreeNode input[type="checkbox"]').simulate('click');
+            assert.deepEqual(['jupiter'], actualChecked);
+
+            // Checked to unchecked
+            wrapper = makeEmptyParentNode(['jupiter']);
+            wrapper.find('TreeNode input[type="checkbox"]').simulate('click');
+            assert.deepEqual([], actualChecked);
+        });
+
         it('should not add disabled children to the checked array', () => {
             let actualChecked = null;