Makes widget-transition set focus when changing side to show

client/src/core-components/widget-transition.js

@@ -1,7 +1,9 @@
 import React              from 'react';
+import ReactDOM           from 'react-dom';
 import classNames         from 'classnames';
 import _                  from 'lodash';
 import {Motion, spring}   from 'react-motion';
+import focus              from 'lib-core/focus';
 
 class WidgetTransition extends React.Component {
 
@@ -19,6 +21,13 @@ class WidgetTransition extends React.Component {
         };
     }
 
+    componentDidUpdate(prevProps) {
+        if (prevProps.sideToShow != this.props.sideToShow && this.primaryWidget && this.secondaryWidget) {
+            console.log("The component was updated!");
+            this.moveFocusToCurrentSide();
+        }
+    }
+
     render() {
         return (
             <Motion defaultStyle={this.getDefaultAnimation()} style={this.getAnimation()}>
@@ -30,7 +39,7 @@ class WidgetTransition extends React.Component {
     renderChildren(animation) {
         return (
             <div className={this.getClass()}>
-                {React.Children.map(this.props.children, function (child, index) {
+                {React.Children.map(this.props.children, (child, index) => {
                     let modifiedChild;
 
                     if (index === 0) {
@@ -38,14 +47,16 @@ class WidgetTransition extends React.Component {
                             className: child.props.className + ' widget-transition--widget',
                             style: _.extend ({}, child.props.style, {
                                 transform: `rotateY(${(animation.rotateY) ? animation.rotateY: 0}deg)`
-                            })
+                            }),
+                            ref: (node) => this.primaryWidget = node
                         });
                     } else {
                         modifiedChild = React.cloneElement(child, {
                             className: child.props.className + ' widget-transition--widget',
                             style: _.extend ({}, child.props.style, {
                                 transform: `rotateY(${-180 + animation.rotateY}deg)`
-                            })
+                            }),
+                            ref: (node) => this.secondaryWidget = node
                         });
                     }
 
@@ -69,6 +80,24 @@ class WidgetTransition extends React.Component {
             rotateY: (this.props.sideToShow === 'front') ? spring(0, [100, 20]) : spring(180, [100, 20])
         };
     }
+    
+    moveFocusToCurrentSide() {
+        let currentWidget;
+        let previousWidget;
+
+        if (this.props.sideToShow === 'front') {
+            currentWidget = this.primaryWidget; 
+            previousWidget = this.secondaryWidget;
+        } else {
+            currentWidget = this.secondaryWidget;
+            previousWidget = this.primaryWidget;
+        }
+
+        currentWidget = ReactDOM.findDOMNode(currentWidget);
+        previousWidget = ReactDOM.findDOMNode(previousWidget);
+
+        focus.focusFirstInput(currentWidget);
+    }
 }
 
 export default WidgetTransition;