fix: add autofocus to auth fields (#6483)

Author: Saibamen

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>
         {

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>

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>

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")
   })
-})
+})