Fix issue where an initially disabled tree could not be enabled after the initial render

Resolves #119.

Author: jakezatecky

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ### Bug Fixes
 
+* [#119]: Fix issue where an initially disabled tree could not be enabled after the initial render
 * [#120]: Fix issue where Internet Explorer and Microsoft Edge browsers would fail to update check state when a parent was in a half-check or indeterminate state
 * [#125]: Fix misalignment of TreeNode's `label` property between PropType and TypeScript definitions
 

src/js/CheckboxTree.js

@@ -102,11 +102,14 @@ class CheckboxTree extends React.Component {
     // eslint-disable-next-line react/sort-comp
     static getDerivedStateFromProps(newProps, prevState) {
         const { model, prevProps } = prevState;
-        const { id, nodes } = newProps;
+        const { disabled, id, nodes } = newProps;
         let newState = { ...prevState, prevProps: newProps };
 
-        // Since flattening nodes is an expensive task, only update when there is a change
-        if (!isEqual(prevProps.nodes, nodes)) {
+        // Apply new properties to model
+        model.setProps(newProps);
+
+        // Since flattening nodes is an expensive task, only update when there is a node change
+        if (!isEqual(prevProps.nodes, nodes) || prevProps.disabled !== disabled) {
             model.flattenNodes(nodes);
         }
 

src/js/NodeModel.js

@@ -4,6 +4,10 @@ class NodeModel {
         this.flatNodes = nodes;
     }
 
+    setProps(props) {
+        this.props = props;
+    }
+
     clone() {
         const clonedNodes = {};
 

test/CheckboxTree.js

@@ -297,6 +297,29 @@ describe('<CheckboxTree />', () => {
 
                 assert.isFalse(wrapper.find('TreeNode[value="europa"]').prop('disabled'));
             });
+
+            // https://github.com/jakezatecky/react-checkbox-tree/issues/119
+            it('should be able to change disabled state after the initial render', () => {
+                const wrapper = shallow(
+                    <CheckboxTree
+                        disabled
+                        expanded={['jupiter']}
+                        nodes={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                    />,
+                );
+
+                wrapper.setProps({ disabled: false });
+
+                assert.isFalse(wrapper.find('TreeNode[value="europa"]').prop('disabled'));
+            });
         });
     });