From 65ea764b6150de9bbecb7be0569b45ab4a9691d1 Mon Sep 17 00:00:00 2001
From: Adam Stachowicz <saibamenppl@gmail.com>
Date: Thu, 15 Oct 2020 02:23:19 +0000
Subject: [PATCH] fix: add autofocus to auth fields (#6483)

---
 src/core/components/auth/api-key-auth.jsx           |  2 +-
 src/core/components/auth/basic-auth.jsx             |  2 +-
 src/core/components/auth/oauth2.jsx                 |  2 +-
 .../tests/features/oauth2-flows/application.js      | 13 ++++++++++++-
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/core/components/auth/api-key-auth.jsx b/src/core/components/auth/api-key-auth.jsx
index 105e7c65..c4eb2dff 100644
--- a/src/core/components/auth/api-key-auth.jsx
+++ b/src/core/components/auth/api-key-auth.jsx
@@ -70,7 +70,7 @@ export default class ApiKeyAuth extends React.Component {
           <label>Value:</label>
           {
             value ? <code> ****** </code>
-                  : <Col><Input type="text" onChange={ this.onChange }/></Col>
+                  : <Col><Input type="text" onChange={ this.onChange } autoFocus/></Col>
           }
         </Row>
         {
diff --git a/src/core/components/auth/basic-auth.jsx b/src/core/components/auth/basic-auth.jsx
index e0ccd1fc..26cd5c7f 100644
--- a/src/core/components/auth/basic-auth.jsx
+++ b/src/core/components/auth/basic-auth.jsx
@@ -66,7 +66,7 @@ export default class BasicAuth extends React.Component {
           <label>Username:</label>
           {
             username ? <code> { username } </code>
-                     : <Col><Input type="text" required="required" name="username" onChange={ this.onChange }/></Col>
+                     : <Col><Input type="text" required="required" name="username" onChange={ this.onChange } autoFocus/></Col>
           }
         </Row>
         <Row>
diff --git a/src/core/components/auth/oauth2.jsx b/src/core/components/auth/oauth2.jsx
index 3dc042cb..5daa2143 100644
--- a/src/core/components/auth/oauth2.jsx
+++ b/src/core/components/auth/oauth2.jsx
@@ -148,7 +148,7 @@ export default class Oauth2 extends React.Component {
                 {
                   isAuthorized ? <code> { this.state.username } </code>
                     : <Col tablet={10} desktop={10}>
-                      <input id="oauth_username" type="text" data-name="username" onChange={ this.onInputChange }/>
+                      <input id="oauth_username" type="text" data-name="username" onChange={ this.onInputChange } autoFocus/>
                     </Col>
                 }
               </Row>
diff --git a/test/e2e-cypress/tests/features/oauth2-flows/application.js b/test/e2e-cypress/tests/features/oauth2-flows/application.js
index 90446198..739cfc7a 100644
--- a/test/e2e-cypress/tests/features/oauth2-flows/application.js
+++ b/test/e2e-cypress/tests/features/oauth2-flows/application.js
@@ -7,6 +7,17 @@ describe("OAuth2 Application flow", function() {
     }).as("tokenRequest")
   })
 
+  // https://github.com/swagger-api/swagger-ui/issues/6395
+  it("should have first authorization input autofocused", () => {
+    cy
+      .visit("/?url=http://localhost:3231/swagger.yaml")
+      .get(".btn.authorize")
+      .click()
+
+    cy.focused()
+      .should("have.id", "oauth_username")
+  })
+
   it("should make an application flow Authorization header request", () => {
     cy
       .visit("/?url=http://localhost:3231/swagger.yaml")
@@ -52,4 +63,4 @@ describe("OAuth2 Application flow", function() {
       .get(".live-responses-table .response-col_status")
       .contains("200")
   })
-})
\ No newline at end of file
+})