0.5.3 - Add onFocus and onBlur on TokenField

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.5.3 - 2018-07-17
+
+* Add onFocus and onBlur on TokenField
+
 ## 0.5.2 - 2018-07-17
 
 * Fix Styling

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deskpro/token-field",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "",
   "main": "dist/index.js",
   "private": false,

src/Components/TokenField.jsx

@@ -28,22 +28,23 @@ export default class TokenField extends React.Component {
     value:             PropTypes.array.isRequired,
     zIndex:            PropTypes.number,
     showTokensOnFocus: PropTypes.bool,
+    blurTimeout:       PropTypes.number,
   };
 
   static defaultProps = {
     onChange() {},
     onFocus() {},
     onBlur() {},
     zIndex:            100,
+    blurTimeout:       300,
     showTokensOnFocus: false,
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      value: props.value,
+      value:   props.value,
       focused: false,
-      blurred: true,
     };
 
     this.inputs = [];
@@ -64,6 +65,30 @@ export default class TokenField extends React.Component {
     }
   }
 
+  onFocus = () => {
+    if (!this.state.focused) {
+      this.props.onFocus();
+      this.setState({
+        focused: true
+      });
+    }
+    if (this.pendingBlur) {
+      window.clearTimeout(this.pendingBlur);
+    }
+  };
+
+  onBlur = () => {
+    if (this.pendingBlur) {
+      window.clearTimeout(this.pendingBlur);
+    }
+    this.pendingBlur = window.setTimeout(() => {
+      this.setState({
+        focused: false
+      });
+      this.props.onBlur();
+    }, this.props.blurTimeout);
+  };
+
   getInputField = (key, value) => (
     <TokenFieldInput
       ref={(c) => { this.inputs[key] = c; }}
@@ -83,33 +108,6 @@ export default class TokenField extends React.Component {
     />
   );
 
-  onFocus = () => {
-    console.log('focus');
-    if (this.state.blurred) {
-      this.props.onFocus();
-    }
-    this.setState({
-      focused: true
-    });
-  };
-
-  onBlur = () => {
-    console.log('blur');
-    this.setState({
-      focused: false
-    });
-    setTimeout(() => {
-      console.log('check_blur');
-      if (!this.state.focused) {
-        this.props.onBlur();
-      } else {
-        this.setState({
-          focused: true
-        });
-      }
-    }, 10);
-  };
-
   addInputAndFocus = (key) => {
     const { value } = this.state;
     const inputKey = (!key) ? value.length : key;