Merge pull request #16125 from desktop/sign-in-flow-kbd-focus

Focus on first suitable child in sign in flow

app/src/ui/dialog/dialog.tsx

@@ -383,7 +383,7 @@ export class Dialog extends React.Component<IDialogProps, IDialogState> {
    *  4. Any remaining button
    *
    */
-  private focusFirstSuitableChild() {
+  public focusFirstSuitableChild() {
     const dialog = this.dialogElement
 
     if (dialog === null) {

app/src/ui/sign-in/sign-in.tsx

@@ -41,6 +41,8 @@ const SignInWithBrowserTitle = __DARWIN__
 const DefaultTitle = 'Sign in'
 
 export class SignIn extends React.Component<ISignInProps, ISignInState> {
+  private readonly dialogRef = React.createRef<Dialog>()
+
   public constructor(props: ISignInProps) {
     super(props)
 
@@ -52,6 +54,18 @@ export class SignIn extends React.Component<ISignInProps, ISignInState> {
     }
   }
 
+  public componentDidUpdate(prevProps: ISignInProps) {
+    // Whenever the sign in step changes we replace the dialog contents which
+    // means we need to re-focus the first suitable child element as it's
+    // essentially a "new" dialog we're showing only the dialog component itself
+    // doesn't know that.
+    if (prevProps.signInState !== null && this.props.signInState !== null) {
+      if (prevProps.signInState.kind !== this.props.signInState.kind) {
+        this.dialogRef.current?.focusFirstSuitableChild()
+      }
+    }
+  }
+
   public componentWillReceiveProps(nextProps: ISignInProps) {
     if (nextProps.signInState !== this.props.signInState) {
       if (
@@ -161,6 +175,7 @@ export class SignIn extends React.Component<ISignInProps, ISignInState> {
         <OkCancelButtonGroup
           okButtonText={primaryButtonText}
           okButtonDisabled={disableSubmit}
+          onCancelButtonClick={this.onDismissed}
         />
       </DialogFooter>
     )
@@ -324,6 +339,7 @@ export class SignIn extends React.Component<ISignInProps, ISignInState> {
         onDismissed={this.onDismissed}
         onSubmit={this.onSubmit}
         loading={state.loading}
+        ref={this.dialogRef}
       >
         {errors}
         {this.renderStep()}