From 6a8bdf47905496246182f5b06fa71dbf74dec7fe Mon Sep 17 00:00:00 2001
From: Fahri Soenmez <fahri.soenmez@hbm.com>
Date: Tue, 27 Sep 2016 11:47:23 +0200
Subject: [PATCH] checkbox: circular shadow fix

---
 components/checkbox/Checkbox.scss | 20 ++------------------
 components/checkbox/index.js      | 17 +++++++++--------
 2 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/components/checkbox/Checkbox.scss b/components/checkbox/Checkbox.scss
index 84432db96..5cf031eec 100644
--- a/components/checkbox/Checkbox.scss
+++ b/components/checkbox/Checkbox.scss
@@ -15,14 +15,6 @@
   position: absolute;
   opacity: 0;
   z-index: -1;
-  overflow: hidden;
-  pointer-events: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-
-.Checkbox-input:focus {
-  outline:0;
 }
 
 .Checkbox-icon {
@@ -85,22 +77,14 @@
   }
 }
 
-.Checkbox-input:checked:focus ~ .Checkbox-focus {
+.Checkbox-input:checked.Checkbox-input--keyboard ~ .Checkbox-focus {
   box-shadow: 0 0 0 8px rgba($blue-dark, 0.12);
   background-color: rgba($blue-dark, 0.12);
   display: block;
 }
 
-.Checkbox-input:not(:checked):focus ~ .Checkbox-focus {
+.Checkbox-input:not(:checked).Checkbox-input--keyboard ~ .Checkbox-focus {
   box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.12);
   background-color: rgba(0, 0, 0, 0.12);
   display: block;
 }
-
-.Checkbox-input:active, .Checkbox-input.active {
-  display: none;
-  
-  & ~ .Checkbox-focus {
-    display: none;
-  }
-}
diff --git a/components/checkbox/index.js b/components/checkbox/index.js
index bb0af8790..9ad950d28 100644
--- a/components/checkbox/index.js
+++ b/components/checkbox/index.js
@@ -33,25 +33,26 @@ export default class Checkbox extends React.Component {
     }
   }
 
-  onCleanUp = (event) => {
+  onCleanUp = (e) => {
     this.setState({
       active: false
     })
   }
 
-  onClick = (event) => {
-    this.setState({
-      active: true
-    })
-    window.setTimeout(this.onCleanUp, 100)
+  onKeyUp = (e) => {
+    if (e.keyCode === 9) {
+      this.setState({
+        active: true
+      })
+    }
   }
 
   render () {
     return (
-      <label className='Checkbox' title={this.props.label} onClick={this.onClick}>
+      <label className='Checkbox' title={this.props.label} onKeyUp={this.onKeyUp} onBlur={this.onCleanUp}>
         <input
           checked={this.props.checked}
-          className={classnames('Checkbox-input', {active: this.state.active})}
+          className={classnames('Checkbox-input', {'Checkbox-input--keyboard': this.state.active})}
           defaultChecked={this.props.defaultChecked}
           disabled={this.props.disabled}
           name={this.props.name}