Fixed #207

src/components/checkbox/Checkbox.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import DomHandler from '../utils/DomHandler';
 
 export class Checkbox extends Component {
 
@@ -27,6 +28,8 @@ export class Checkbox extends Component {
     constructor() {
         super();
         this.onClick = this.onClick.bind(this);
+        this.onFocus = this.onFocus.bind(this);
+        this.onBlur = this.onBlur.bind(this);
     }
 
     onClick(e) {
@@ -39,17 +42,25 @@ export class Checkbox extends Component {
         }
     }
 
+    onFocus(e) {
+        DomHandler.addClass(this.box, 'ui-state-focus');
+    }
+
+    onBlur(e) {
+        DomHandler.removeClass(this.box, 'ui-state-focus');
+    }
+
     render() {
         let containerClass = classNames('ui-chkbox ui-widget', this.props.className);
         let boxClass = classNames('ui-chkbox-box ui-widget ui-corner-all ui-state-default', {'ui-state-active':this.props.checked});
         let iconClass = classNames('ui-chkbox-icon ui-c', {'fa fa-check': this.props.checked});
 
         return (
-            <div id={this.props.id} className={containerClass} onContextMenu={this.props.onContextMenu} onMouseDown={this.props.onMouseDown}>
+            <div id={this.props.id} className={containerClass} onClick={this.onClick} onContextMenu={this.props.onContextMenu} onMouseDown={this.props.onMouseDown}>
                 <div className="ui-helper-hidden-accessible">
-                    <input type="checkbox" name={this.props.name} />
+                    <input type="checkbox" name={this.props.name} checked={this.props.checked} onFocus={this.onFocus} onBlur={this.onBlur}/>
                 </div>
-                <div className={boxClass} onClick={this.onClick}>
+                <div className={boxClass} ref={(el) => { this.box = el; }}>
                     <span className={iconClass}></span>
                 </div>
             </div>