From 4c59a3039b289038a740a782ae4bf2148f7f6689 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87a=C4=9Fatay=20=C3=87ivici?=
 <cagatay.civici@github.com>
Date: Mon, 4 Dec 2017 11:27:15 +0300
Subject: [PATCH] Fixed #207

---
 src/components/checkbox/Checkbox.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/checkbox/Checkbox.js b/src/components/checkbox/Checkbox.js
index a2801aad47..e2bbe5f7d7 100644
--- a/src/components/checkbox/Checkbox.js
+++ b/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>