Fix issue where the id property did not apply to the top-level CheckboxTree container

Resolves #180.

Author: jakezatecky

CHANGELOG.md

@@ -12,6 +12,7 @@
 
 * [#127]: Change TypeScript definition of TreeNode's `label` property to `React.ReactNode` to better align with the PropType
 * [#145]: Fix alignment of many React properties to TypeScript typings
+* [#180]: Fix issue where the `id` property did not apply to the top-level CheckboxTree container
 
 ## [v1.5.0](https://github.com/jakezatecky/react-checkbox-tree/compare/v1.4.1...v1.5.0) (2019-01-25)
 

src/js/CheckboxTree.js

@@ -342,6 +342,7 @@ class CheckboxTree extends React.Component {
             nodes,
             nativeCheckboxes,
         } = this.props;
+        const { id } = this.state;
         const treeNodes = this.renderTreeNodes(nodes);
 
         const className = classNames({
@@ -352,7 +353,7 @@ class CheckboxTree extends React.Component {
         });
 
         return (
-            <div className={className}>
+            <div className={className} id={id}>
                 {this.renderExpandAll()}
                 {this.renderHiddenInput()}
                 {treeNodes}

test/CheckboxTree.js

@@ -217,7 +217,18 @@ describe('<CheckboxTree />', () => {
     });
 
     describe('id', () => {
-        it('should pass the property directly to tree nodes', () => {
+        it('should pass the id to the top-level DOM node', () => {
+            const wrapper = shallow(
+                <CheckboxTree
+                    id="my-awesome-id"
+                    nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
+                />,
+            );
+
+            assert.equal('my-awesome-id', wrapper.prop('id'));
+        });
+
+        it('should pass the id as a property directly to tree nodes', () => {
             const wrapper = shallow(
                 <CheckboxTree
                     id="my-awesome-id"