Merge pull request mzabriskie#2 from codio/master

fix: Protect against unmounting
rcarvalho · Nov 14, 2016 · ee85441 · ee85441
2 parents 99ed371 + 32e004b
commit ee85441
Showing 1 changed file with 13 additions and 7 deletions.
diff --git a/lib/components/FlipCard.js b/lib/components/FlipCard.js
@@ -41,14 +41,20 @@ export default React.createClass({
   getInitialState() {
     return {
       hasFocus: false,
-      isFlipped: this.props.flipped
+      isFlipped: this.props.flipped,
+      isMounted: false
     };
   },
 
   componentDidMount() {
+    this.setState({isMounted: true});
     this._hideFlippedSide();
   },
 
+  componentWillUnmount() {
+    this.setState({isMounted: false});
+  },
+
   componentWillReceiveProps(newProps) {
     // Make sure both sides are displayed for animation
     this._showBothSides();
@@ -104,15 +110,15 @@ export default React.createClass({
   },
 
   handleFocus() {
-    if (this.props.disabled) return;
+    if (this.props.disabled || !this.state.isMounted) return;
 
     this.setState({
       isFlipped: true
     });
   },
 
   handleBlur() {
-    if (this.props.disabled) return;
+    if (this.props.disabled || !this.state.isMounted) return;
 
     this.setState({
       isFlipped: false
@@ -165,17 +171,17 @@ export default React.createClass({
   },
 
   _showBothSides() {
-    this.refs.front.style.display = '';
-    this.refs.back.style.display = '';
+    this.refs.front && (this.refs.front.style.display = '');
+    this.refs.back && (this.refs.back.style.display = '');
   },
 
   _hideFlippedSide() {
     // This prevents the flipped side from being tabbable
     if (this.props.disabled) {
       if (this.state.isFlipped) {
-        this.refs.front.style.display = 'none';
+        this.refs.front && (this.refs.front.style.display = 'none');
       } else {
-        this.refs.back.style.display = 'none';
+        this.refs.back && (this.refs.back.style.display = 'none');
       }
     }
   }