From a5a7b38da9f300e8199247cc9c4b93406817ad88 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 9 Nov 2020 16:33:25 +1100
Subject: [PATCH] add autoFocus feature to SessionInput

---
 ts/components/session/RegistrationTabs.tsx | 8 +++++---
 ts/components/session/SessionInput.tsx     | 4 ++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx
index bc8c9aa88..657c3deac 100644
--- a/ts/components/session/RegistrationTabs.tsx
+++ b/ts/components/session/RegistrationTabs.tsx
@@ -404,6 +404,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
           <SessionInput
             label={window.i18n('recoveryPhrase')}
             type="password"
+            autoFocus={true}
             placeholder={window.i18n('enterRecoveryPhrase')}
             enableShowHide={true}
             onValueChanged={(val: string) => {
@@ -413,7 +414,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
               this.handlePressEnter();
             }}
           />
-          {this.renderNamePasswordAndVerifyPasswordFields()}
+          {this.renderNamePasswordAndVerifyPasswordFields(false)}
         </div>
       );
     }
@@ -467,7 +468,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
     if (signUpMode === SignUpMode.EnterDetails) {
       return (
         <div className={classNames('session-registration__entry-fields')}>
-          {this.renderNamePasswordAndVerifyPasswordFields()}
+          {this.renderNamePasswordAndVerifyPasswordFields(true)}
         </div>
       );
     }
@@ -475,7 +476,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
     return null;
   }
 
-  private renderNamePasswordAndVerifyPasswordFields() {
+  private renderNamePasswordAndVerifyPasswordFields(stealAutoFocus: boolean = false) {
     const { password, passwordFieldsMatch } = this.state;
     const passwordsDoNotMatch =
       !passwordFieldsMatch && this.state.password
@@ -485,6 +486,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
     return (
       <div className="inputfields">
         <SessionInput
+          autoFocus={stealAutoFocus}
           label={window.i18n('displayName')}
           type="text"
           placeholder={window.i18n('enterDisplayName')}
diff --git a/ts/components/session/SessionInput.tsx b/ts/components/session/SessionInput.tsx
index edd8c64ed..4913c5172 100644
--- a/ts/components/session/SessionInput.tsx
+++ b/ts/components/session/SessionInput.tsx
@@ -13,6 +13,8 @@ interface Props {
   enableShowHide?: boolean;
   onValueChanged?: any;
   onEnterPressed?: any;
+  autoFocus?: boolean;
+
 }
 
 interface State {
@@ -35,6 +37,7 @@ export class SessionInput extends React.PureComponent<Props, State> {
 
   public render() {
     const {
+      autoFocus,
       placeholder,
       type,
       value,
@@ -55,6 +58,7 @@ export class SessionInput extends React.PureComponent<Props, State> {
           placeholder={placeholder}
           value={value}
           maxLength={maxLength}
+          autoFocus={autoFocus}
           onChange={e => {
             this.updateInputValue(e);
           }}