Merge pull request #1 from asseinfo/fix-warnings

Fix warnings on react of componentWillReceiveProps

Author: Jean Carlos Farias

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tagsinput",
-  "version": "3.19.0",
+  "version": "3.20.0",
   "description": "Highly customizable React component for inputing tags",
   "main": "react-tagsinput.js",
   "peerDependencies": {

react-tagsinput.js

@@ -545,20 +545,20 @@
         });
       }
     }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate(prevProps) {
         /* istanbul ignore next */
         if (this.hasControlledInput()) {
           return;
         }
 
-        if (!this.inputValue(nextProps)) {
+        if (!this.inputValue(this.props)) {
           return;
         }
 
-        this.setState({
-          tag: this.inputValue(nextProps)
-        });
+        if (this.inputValue(prevProps) !== this.inputValue(this.props)) {
+          this.setState({ tag: this.inputValue(this.props) });
+        }
       }
     }, {
       key: 'render',

src/index.js

@@ -82,8 +82,8 @@ class TagsInput extends React.Component {
   constructor () {
     super()
     this.state = {tag: '', isFocused: false}
-    this.focus = ::this.focus
-    this.blur = ::this.blur
+    this.focus = this.focus.bind(this)
+    this.blur = this.blur.bind(this)
   }
 
   static propTypes = {
@@ -420,19 +420,19 @@ class TagsInput extends React.Component {
     })
   }
 
-  componentWillReceiveProps (nextProps) {
+  componentDidUpdate (prevProps) {
     /* istanbul ignore next */
     if (this.hasControlledInput()) {
       return
     }
 
-    if (!this.inputValue(nextProps)) {
+    if (!this.inputValue(this.props)) {
       return
     }
 
-    this.setState({
-      tag: this.inputValue(nextProps)
-    })
+    if (this.inputValue(prevProps) !== this.inputValue(this.props)) {
+      this.setState({ tag: this.inputValue(this.props) })
+    }
   }
 
   render () {
@@ -474,27 +474,27 @@ class TagsInput extends React.Component {
       return renderTag({
         key: index,
         tag,
-        onRemove: ::this.handleRemove,
+        onRemove: this.handleRemove.bind(this),
         disabled,
-        getTagDisplayValue: ::this._getTagDisplayValue,
+        getTagDisplayValue: this._getTagDisplayValue.bind(this),
         ...tagProps
       })
     })
 
     let inputComponent = renderInput({
       ref: r => { this.input = r },
       value: this._tag(),
-      onPaste: ::this.handlePaste,
-      onKeyDown: ::this.handleKeyDown,
-      onChange: ::this.handleChange,
-      onFocus: ::this.handleOnFocus,
-      onBlur: ::this.handleOnBlur,
-      addTag: ::this.addTag,
+      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),
+      addTag: this.addTag.bind(this),
       ...this.inputProps()
     })
 
     return (
-      <div ref={r => { this.div = r }} onClick={::this.handleClick} className={className}>
+      <div ref={r => { this.div = r }} onClick={this.handleClick.bind(this)} className={className}>
         {renderLayout(tagComponents, inputComponent)}
       </div>
     )

test/index.js

@@ -660,7 +660,7 @@ describe("TagsInput", () => {
       assert.equal(comp.len(), 1, "there should be one tag")
     });
 
-    describe("componentWillReceiveProps", () => {
+    describe("componentDidUpdate", () => {
       it("updates the state", () => {
         class TestParent extends React.Component {
           constructor() {