From 09178a9ee8e53a826ac61a5b55ad70ef18d2b0d3 Mon Sep 17 00:00:00 2001
From: Mike Stone <mikestone14@gmail.com>
Date: Mon, 19 Sep 2016 14:33:43 -0400
Subject: [PATCH] Autofocus first field on forms (#191)

---
 .../forms/ForgotPasswordForm/ForgotPasswordForm.jsx  |  1 +
 frontend/components/forms/LoginForm/LoginForm.jsx    |  1 +
 .../forms/ResetPasswordForm/ResetPasswordForm.jsx    |  1 +
 .../fields/InputFieldWithIcon/InputFieldWithIcon.jsx | 12 ++++++++++++
 4 files changed, 15 insertions(+)

diff --git a/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx b/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx
index 13b5aa4044..bbd7a54b98 100644
--- a/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx
+++ b/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx
@@ -75,6 +75,7 @@ class ForgotPasswordForm extends Component {
     return (
       <form onSubmit={onFormSubmit} style={formStyles}>
         <InputFieldWithIcon
+          autofocus
           error={clientError || serverError}
           iconName="envelope"
           name="email"
diff --git a/frontend/components/forms/LoginForm/LoginForm.jsx b/frontend/components/forms/LoginForm/LoginForm.jsx
index 51c43eb047..3fa87ad7c4 100644
--- a/frontend/components/forms/LoginForm/LoginForm.jsx
+++ b/frontend/components/forms/LoginForm/LoginForm.jsx
@@ -72,6 +72,7 @@ class LoginForm extends Component {
         <div style={containerStyles}>
           <img alt="Avatar" src={avatar} />
           <InputFieldWithIcon
+            autofocus
             iconName="user"
             name="username"
             onChange={onInputChange('username')}
diff --git a/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.jsx b/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.jsx
index 96cb017208..359cb81961 100644
--- a/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.jsx
+++ b/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.jsx
@@ -113,6 +113,7 @@ class ResetPasswordForm extends Component {
     return (
       <form onSubmit={onFormSubmit} style={formStyles}>
         <InputFieldWithIcon
+          autofocus
           error={errors.new_password}
           iconName="lock"
           name="new_password"
diff --git a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
index 9ba51aaf46..b08bf9d930 100644
--- a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
+++ b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
@@ -5,6 +5,7 @@ import componentStyles from './styles';
 
 class InputFieldWithIcon extends Component {
   static propTypes = {
+    autofocus: PropTypes.bool,
     error: PropTypes.string,
     iconName: PropTypes.string,
     name: PropTypes.string,
@@ -15,6 +16,7 @@ class InputFieldWithIcon extends Component {
   };
 
   static defaultProps = {
+    autofocus: false,
     style: {},
     type: 'text',
   };
@@ -24,6 +26,15 @@ class InputFieldWithIcon extends Component {
     this.state = { value: null };
   }
 
+  componentDidMount () {
+    const { autofocus } = this.props;
+    const { input } = this;
+
+    if (autofocus) input.focus();
+
+    return false;
+  }
+
   onInputChange = (evt) => {
     evt.preventDefault();
 
@@ -70,6 +81,7 @@ class InputFieldWithIcon extends Component {
           name={name}
           onChange={onInputChange}
           placeholder={placeholder}
+          ref={(r) => { this.input = r; }}
           style={[inputStyles(value), inputErrorStyles(error), style]}
           type={type}
         />