From b9ed70e0a4f278b45fa9b0db5c9800f49447f339 Mon Sep 17 00:00:00 2001
From: Mark Pitman <mark@pitman.io>
Date: Fri, 17 Dec 2021 08:14:21 -0800
Subject: [PATCH 1/2] Address autofocus issue #7711

Find the first input element in the div with class name
modal-ux-content and set focus to it.
---
 src/core/components/auth/api-key-auth.jsx      |  2 +-
 src/core/components/auth/auths.jsx             | 15 ++++++++++++++-
 src/core/components/auth/basic-auth.jsx        |  2 +-
 src/core/components/auth/oauth2.jsx            |  2 +-
 src/core/plugins/oas3/components/http-auth.jsx |  4 ++--
 5 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/core/components/auth/api-key-auth.jsx b/src/core/components/auth/api-key-auth.jsx
index 5b3527e8c06..deafedc4452 100644
--- a/src/core/components/auth/api-key-auth.jsx
+++ b/src/core/components/auth/api-key-auth.jsx
@@ -69,7 +69,7 @@ export default class ApiKeyAuth extends React.Component {
           <label>Value:</label>
           {
             value ? <code> ****** </code>
-                  : <Col><Input type="text" onChange={ this.onChange } autoFocus/></Col>
+                  : <Col><Input type="text" onChange={ this.onChange } /></Col>
           }
         </Row>
         {
diff --git a/src/core/components/auth/auths.jsx b/src/core/components/auth/auths.jsx
index 62a9bd61e9d..a2030eaed9d 100644
--- a/src/core/components/auth/auths.jsx
+++ b/src/core/components/auth/auths.jsx
@@ -17,6 +17,17 @@ export default class Auths extends React.Component {
     this.state = {}
   }
 
+  componentDidMount() {
+    var inputs = document.getElementsByClassName("modal-ux-content")[0].getElementsByTagName("input")
+    for (let i = 0; i < inputs.length; i++) {
+      const element = inputs[i];
+      if (element) {
+        element.focus()
+        break
+      }
+    }
+  }
+
   onAuthChange =(auth) => {
     let { name } = auth
 
@@ -66,7 +77,9 @@ export default class Auths extends React.Component {
     })
 
     let nonOauthDefinitions = definitions.filter( schema => schema.get("type") !== "oauth2")
-    let oauthDefinitions = definitions.filter( schema => schema.get("type") === "oauth2")
+    let oauthDefinitions = definitions.filter(schema => schema.get("type") === "oauth2")
+
+
 
     return (
       <div className="auth-container">
diff --git a/src/core/components/auth/basic-auth.jsx b/src/core/components/auth/basic-auth.jsx
index 26cd5c7f2c7..ef9d57eaa3d 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 } autoFocus/></Col>
+                     : <Col><Input type="text" required="required" name="username" onChange={ this.onChange } /></Col>
           }
         </Row>
         <Row>
diff --git a/src/core/components/auth/oauth2.jsx b/src/core/components/auth/oauth2.jsx
index 9afa70b4940..f55381c22f4 100644
--- a/src/core/components/auth/oauth2.jsx
+++ b/src/core/components/auth/oauth2.jsx
@@ -163,7 +163,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 } autoFocus/>
+                      <input id="oauth_username" type="text" data-name="username" onChange={ this.onInputChange } />
                     </Col>
                 }
               </Row>
diff --git a/src/core/plugins/oas3/components/http-auth.jsx b/src/core/plugins/oas3/components/http-auth.jsx
index 584de909fdc..2cdc00db590 100644
--- a/src/core/plugins/oas3/components/http-auth.jsx
+++ b/src/core/plugins/oas3/components/http-auth.jsx
@@ -74,7 +74,7 @@ export default class HttpAuth extends React.Component {
           <label>Username:</label>
           {
             username ? <code> { username } </code>
-                     : <Col><Input type="text" required="required" name="username" onChange={ this.onChange } autoFocus/></Col>
+                     : <Col><Input type="text" required="required" name="username" onChange={ this.onChange } /></Col>
           }
         </Row>
         <Row>
@@ -112,7 +112,7 @@ export default class HttpAuth extends React.Component {
               <label>Value:</label>
               {
                 value ? <code> ****** </code>
-              : <Col><Input type="text" onChange={ this.onChange } autoFocus/></Col>
+              : <Col><Input type="text" onChange={ this.onChange } /></Col>
           }
         </Row>
         {

From 3011ff9d51870400721c793b11187474cb016f26 Mon Sep 17 00:00:00 2001
From: Mark Pitman <mark@pitman.io>
Date: Fri, 4 Feb 2022 10:51:45 -0800
Subject: [PATCH 2/2] Remove semicolon

I didn't realize this project does not use semi-colons.
---
 src/core/components/auth/auths.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/components/auth/auths.jsx b/src/core/components/auth/auths.jsx
index a2030eaed9d..450f9d51fd8 100644
--- a/src/core/components/auth/auths.jsx
+++ b/src/core/components/auth/auths.jsx
@@ -20,7 +20,7 @@ export default class Auths extends React.Component {
   componentDidMount() {
     var inputs = document.getElementsByClassName("modal-ux-content")[0].getElementsByTagName("input")
     for (let i = 0; i < inputs.length; i++) {
-      const element = inputs[i];
+      const element = inputs[i]
       if (element) {
         element.focus()
         break