From a6529cc5b0bb55aee9b7dd8f2978114457a86695 Mon Sep 17 00:00:00 2001
From: noahtalerman <47070608+noahtalerman@users.noreply.github.com>
Date: Wed, 21 Oct 2020 21:03:39 -0400
Subject: [PATCH] Fix form field focus on setup pages (#2336)

- Using componentDidUpdate() to check for currentPage change in setup registration form. Initially tried adding `autofocus` prop to the first `<InputFieldWithIcon />` on each page. As seen in AdminDetails page. Didn't work. I believe React only pays attention to `autofocus` when the <input> is re-rendered.

- Calling focus() on page's first input  when currentPage changes and is true. Using refs callback

- Delaying focus by 300ms using setTimeout because the `.user-registration__field-wrapper` has a transition duration of 300ms. Setting the inputs focus immediately creates a snapping movement and ruins the smooth transition.

Fixes #936
---
 .../RegistrationForm/AdminDetails/AdminDetails.jsx   | 12 ++++++++++++
 .../RegistrationForm/KolideDetails/KolideDetails.jsx | 12 ++++++++++++
 .../forms/RegistrationForm/OrgDetails/OrgDetails.jsx | 12 ++++++++++++
 3 files changed, 36 insertions(+)

diff --git a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx
index ff725df4b..68ba87e1c 100644
--- a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx
+++ b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx
@@ -23,6 +23,17 @@ class AdminDetails extends Component {
     handleSubmit: PropTypes.func.isRequired,
   };
 
+  componentDidUpdate(prevProps) {
+    if (this.props.currentPage && this.props.currentPage !== prevProps.currentPage) {
+      // Component has a transition duration of 300ms set in
+      // RegistrationForm/_styles.scss. We need to wait 300ms before
+      // calling .focus() to preserve smooth transition.
+      setTimeout(() => {
+        this.firstInput.input.focus();
+      }, 300);
+    }
+  }
+
   render () {
     const { className, currentPage, fields, handleSubmit } = this.props;
     const tabIndex = currentPage ? 1 : -1;
@@ -36,6 +47,7 @@ class AdminDetails extends Component {
             placeholder="Username"
             tabIndex={tabIndex}
             autofocus={currentPage}
+            ref={(input) => { this.firstInput = input; }}
           />
           <InputFieldWithIcon
             {...fields.password}
diff --git a/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx b/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx
index ad1a7a15e..8ed0f91d7 100644
--- a/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx
+++ b/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx
@@ -20,6 +20,17 @@ class KolideDetails extends Component {
     handleSubmit: PropTypes.func.isRequired,
   };
 
+  componentDidUpdate(prevProps) {
+    if (this.props.currentPage && this.props.currentPage !== prevProps.currentPage) {
+      // Component has a transition duration of 300ms set in
+      // RegistrationForm/_styles.scss. We need to wait 300ms before
+      // calling .focus() to preserve smooth transition.
+      setTimeout(() => {
+        this.firstInput.input.focus();
+      }, 300);
+    }
+  }
+
   render () {
     const { className, currentPage, fields, handleSubmit } = this.props;
     const tabIndex = currentPage ? 1 : -1;
@@ -32,6 +43,7 @@ class KolideDetails extends Component {
             placeholder="Fleet Web Address"
             tabIndex={tabIndex}
             hint={['Don’t include ', <code key="hint">/v1</code>, ' or any other path']}
+            ref={(input) => { this.firstInput = input; }}
           />
         </div>
         <Button type="submit" variant="gradient" tabIndex={tabIndex} disabled={!currentPage}>
diff --git a/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx b/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx
index ffa997a7d..d62df60df 100644
--- a/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx
+++ b/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx
@@ -21,6 +21,17 @@ class OrgDetails extends Component {
     handleSubmit: PropTypes.func.isRequired,
   };
 
+  componentDidUpdate(prevProps) {
+    if (this.props.currentPage && this.props.currentPage !== prevProps.currentPage) {
+      // Component has a transition duration of 300ms set in
+      // RegistrationForm/_styles.scss. We need to wait 300ms before
+      // calling .focus() to preserve smooth transition.
+      setTimeout(() => {
+        this.firstInput.input.focus();
+      }, 300);
+    }
+  }
+
   render () {
     const { className, currentPage, fields, handleSubmit } = this.props;
     const tabIndex = currentPage ? 1 : -1;
@@ -32,6 +43,7 @@ class OrgDetails extends Component {
             {...fields.org_name}
             placeholder="Organization Name"
             tabIndex={tabIndex}
+            ref={(input) => { this.firstInput = input; }}
           />
           <InputFieldWithIcon
             {...fields.org_logo_url}