add option to add a class on focus

Author: zhouzi

react-tagsinput.css

@@ -6,6 +6,10 @@
   padding-top: 5px;
 }
 
+.react-tagsinput--focused {
+  border-color: #a5d24a;
+}
+
 .react-tagsinput-tag {
   background-color: #cde69c;
   border-radius: 2px;

react-tagsinput.js

@@ -173,7 +173,7 @@
 
       var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(TagsInput).call(this));
 
-      _this.state = { tag: '' };
+      _this.state = { tag: '', isFocused: false };
       _this.focus = _this.focus.bind(_this);
       _this.blur = _this.blur.bind(_this);
       return _this;
@@ -241,11 +241,13 @@
       key: 'focus',
       value: function focus() {
         this.refs.input.focus();
+        this.handleOnFocus();
       }
     }, {
       key: 'blur',
       value: function blur() {
         this.refs.input.blur();
+        this.handleOnBlur();
       }
     }, {
       key: 'accept',
@@ -318,9 +320,20 @@
 
         this.setState({ tag: tag });
       }
+    }, {
+      key: 'handleOnFocus',
+      value: function handleOnFocus() {
+        this.setState({ isFocused: true });
+      }
     }, {
       key: 'handleOnBlur',
       value: function handleOnBlur(e) {
+        this.setState({ isFocused: false });
+
+        if (e == null) {
+          return;
+        }
+
         if (this.props.addOnBlur) {
           this._addTags([e.target.value]);
         }
@@ -359,12 +372,20 @@
         var renderInput = _props4.renderInput;
         var addKeys = _props4.addKeys;
         var removeKeys = _props4.removeKeys;
+        var className = _props4.className;
+        var focusedClassName = _props4.focusedClassName;
 
-        var other = _objectWithoutProperties(_props4, ['value', 'onChange', 'inputProps', 'tagProps', 'renderLayout', 'renderTag', 'renderInput', 'addKeys', 'removeKeys']);
+        var other = _objectWithoutProperties(_props4, ['value', 'onChange', 'inputProps', 'tagProps', 'renderLayout', 'renderTag', 'renderInput', 'addKeys', 'removeKeys', 'className', 'focusedClassName']);
 
-        var tag = this.state.tag;
+        var _state = this.state;
+        var tag = _state.tag;
+        var isFocused = _state.isFocused;
 
 
+        if (isFocused) {
+          className += ' ' + focusedClassName;
+        }
+
         var tagComponents = value.map(function (tag, index) {
           return renderTag(_extends({ key: index, tag: tag, onRemove: _this2.handleRemove.bind(_this2) }, tagProps));
         });
@@ -375,12 +396,13 @@
           onPaste: this.handlePaste.bind(this),
           onKeyDown: this.handleKeyDown.bind(this),
           onChange: this.handleChange.bind(this),
+          onFocus: this.handleOnFocus.bind(this),
           onBlur: this.handleOnBlur.bind(this)
         }, this.inputProps()));
 
         return _react2.default.createElement(
           'div',
-          _extends({ ref: 'div', onClick: this.handleClick.bind(this) }, other),
+          _extends({ ref: 'div', onClick: this.handleClick.bind(this), className: className }, other),
           renderLayout(tagComponents, inputComponent)
         );
       }
@@ -390,6 +412,7 @@
   }(_react2.default.Component);
 
   TagsInput.propTypes = {
+    focusedClassName: _react2.default.PropTypes.string,
     addKeys: _react2.default.PropTypes.array,
     addOnBlur: _react2.default.PropTypes.bool,
     addOnPaste: _react2.default.PropTypes.bool,
@@ -408,6 +431,7 @@
   };
   TagsInput.defaultProps = {
     className: 'react-tagsinput',
+    focusedClassName: 'react-tagsinput--focused',
     addKeys: [9, 13],
     addOnBlur: false,
     addOnPaste: false,

src/index.js

@@ -57,12 +57,13 @@ function defaultPasteSplit (data) {
 class TagsInput extends React.Component {
   constructor () {
     super()
-    this.state = {tag: ''}
+    this.state = {tag: '', isFocused: false}
     this.focus = ::this.focus
     this.blur = ::this.blur
   }
 
   static propTypes = {
+    focusedClassName: React.PropTypes.string,
     addKeys: React.PropTypes.array,
     addOnBlur: React.PropTypes.bool,
     addOnPaste: React.PropTypes.bool,
@@ -82,6 +83,7 @@ class TagsInput extends React.Component {
 
   static defaultProps = {
     className: 'react-tagsinput',
+    focusedClassName: 'react-tagsinput--focused',
     addKeys: [9, 13],
     addOnBlur: false,
     addOnPaste: false,
@@ -142,10 +144,12 @@ class TagsInput extends React.Component {
 
   focus () {
     this.refs.input.focus()
+    this.handleOnFocus()
   }
 
   blur () {
     this.refs.input.blur()
+    this.handleOnBlur()
   }
 
   accept () {
@@ -205,7 +209,17 @@ class TagsInput extends React.Component {
     this.setState({tag})
   }
 
+  handleOnFocus () {
+    this.setState({isFocused: true})
+  }
+
   handleOnBlur (e) {
+    this.setState({isFocused: false})
+
+    if (e == null) {
+      return
+    }
+
     if (this.props.addOnBlur) {
       this._addTags([e.target.value])
     }
@@ -223,8 +237,12 @@ class TagsInput extends React.Component {
 
   render () {
     // eslint-disable-next-line
-    let {value, onChange, inputProps, tagProps, renderLayout, renderTag, renderInput, addKeys, removeKeys, ...other} = this.props
-    let {tag} = this.state
+    let {value, onChange, inputProps, tagProps, renderLayout, renderTag, renderInput, addKeys, removeKeys, className, focusedClassName, ...other} = this.props
+    let {tag, isFocused} = this.state
+
+    if (isFocused) {
+      className += ' ' + focusedClassName
+    }
 
     let tagComponents = value.map((tag, index) => {
       return renderTag({key: index, tag, onRemove: ::this.handleRemove, ...tagProps})
@@ -236,12 +254,13 @@ class TagsInput extends React.Component {
       onPaste: ::this.handlePaste,
       onKeyDown: ::this.handleKeyDown,
       onChange: ::this.handleChange,
+      onFocus: ::this.handleOnFocus,
       onBlur: ::this.handleOnBlur,
       ...this.inputProps()
     })
 
     return (
-      <div ref='div' onClick={::this.handleClick} {...other}>
+      <div ref='div' onClick={::this.handleClick} className={className} {...other}>
         {renderLayout(tagComponents, inputComponent)}
       </div>
     )

test/index.js

@@ -214,6 +214,14 @@ describe("TagsInput", () => {
   });
 
   describe("props", () => {
+    let defaultClassName;
+    let defaultFocusedClassName;
+
+    beforeEach(() => {
+      defaultClassName = "react-tagsinput";
+      defaultFocusedClassName = "react-tagsinput--focused";
+    });
+
     it("should not add a tag twice if onlyUnique is true", () => {
       let comp = TestUtils.renderIntoDocument(<TestComponent onlyUnique={true} />);
       let tag = randstring();
@@ -311,6 +319,41 @@ describe("TagsInput", () => {
         assert.equal(comp.len(), 1, "there should be 1 tags");
     });
 
+    it("should add a default className to host", () => {
+      let comp = TestUtils.renderIntoDocument(<TestComponent />);
+      assert.equal(allClass(comp, defaultClassName).length, 1);
+    });
+
+    it("should add a custom className to host", () => {
+      let customClassName = "custom-class";
+      let comp = TestUtils.renderIntoDocument(<TestComponent className={customClassName} />);
+      assert.equal(allClass(comp, defaultClassName).length, 0);
+      assert.equal(allClass(comp, customClassName).length, 1);
+    });
+
+    it("should add a default className to host on focus", () => {
+      let className = `${defaultClassName} ${defaultFocusedClassName}`;
+      let comp = TestUtils.renderIntoDocument(<TestComponent />);
+
+      comp.tagsinput().focus();
+      assert.equal(allClass(comp, className).length, 1, "on focus");
+
+      comp.tagsinput().blur();
+      assert.equal(allClass(comp, className).length, 0, "on blur");
+    });
+
+    it("should add a custom className to host on focus", () => {
+      let customFocusedClassName = "custom-focus";
+      let className = `${defaultClassName} ${customFocusedClassName}`;
+      let comp = TestUtils.renderIntoDocument(<TestComponent focusedClassName={customFocusedClassName} />);
+
+      comp.tagsinput().focus();
+      assert.equal(allClass(comp, className).length, 1, "on focus");
+
+      comp.tagsinput().blur();
+      assert.equal(allClass(comp, className).length, 0, "on blur");
+    });
+
     it("should add props to tag", () => {
       let comp = TestUtils.renderIntoDocument(<TestComponent tagProps={{className: "test"}} />);
       let tag = randstring();