Merge pull request #5 from tiffon/focus-bug-safe-lifecycles

Fix bug in focus handler; use safe lifecycle methods

Author: Joe Farro

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Releases
+
+## v1.1.0 (Unreleased)
+
+
+- Add PropTypes, React 16 Support ([#2](https://github.com/tiffon/txregions/pull/2), [@richseviora](https://github.com/richseviora))
+
+- Fix bug focus event handler ([#3](https://github.com/tiffon/txregions/pull/3), [@tiffon](https://github.com/tiffon))
+
+- Don't use unsafe lifecycle methods ([#3](https://github.com/tiffon/txregions/pull/3), [@tiffon](https://github.com/tiffon))
+
+
+### [Changes for 1.0.3 and earlier are not logged here](https://www.youtube.com/watch?v=NoAzpa1x7jU&feature=youtu.be&t=107)

package.json

@@ -22,7 +22,6 @@
     "build-min": "NODE_ENV=production webpack -p src/index.js umd/TxRegions.min.js",
     "lint": "eslint src demo",
     "start": "cd demo && node server.js && cd -",
-    "test-node": "mocha --compilers js:babel-core/register tests.node.js",
     "postinstall": "node ./npm-scripts/postinstall.js"
   },
   "authors": [

src/TxRegionsInput.js

@@ -46,6 +46,12 @@ export const classNames = {
 
 export default class TxRegionsInput extends Component {
 
+    static getDerivedStateFromProps(props, state) {
+        if (!('value' in props) || state.raw === props.value) {
+            return null
+        }
+        return {raw: props.value == null ? '' : String(props.value)}
+    }
 
     constructor(props) {
         super(props);
@@ -381,8 +387,8 @@ export default class TxRegionsInput extends Component {
             this.setState({
                 hasFocus: true,
                 rawCaretPos: this._findSelectionOffset()
-            }, 0);
-        })
+            });
+        }, 0)
     }
 
 
@@ -440,13 +446,6 @@ export default class TxRegionsInput extends Component {
     }
 
 
-    componentWillReceiveProps(nextProps, nextState) {
-        if ('value' in nextProps) {
-            this.setState({raw: nextProps.value});
-        }
-    }
-
-
     shouldComponentUpdate(nextProps, nextState) {
         return (
             nextState.hasFocus !== this.state.hasFocus ||
@@ -457,11 +456,6 @@ export default class TxRegionsInput extends Component {
     }
 
 
-    componentWillUpdate(nextProps, nextState) {
-        this._updateViolations();
-    }
-
-
     componentDidUpdate() {
         this._forceHtml();
 
@@ -482,6 +476,8 @@ export default class TxRegionsInput extends Component {
 
 
     render() {
+        this._updateViolations();
+
         const
             p = this.props,
             clean = this.clean,