Support autocomplete on input

Authress-Engineering · Jul 25, 2024 · b11cf4f · b11cf4f
1 parent 100f9e6
commit b11cf4f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,9 +11,10 @@ This package follows standard semvar, `<major>.<minor>.<build>`. No breaking cha
 * Prevent making requests when required path parameters are not specified.
 * Automatically retry fetching the spec if it doesn't work for any reason.
 * Fix array description display preference to be first--The Array description, and then only second--The array item schema description, so that the "more specific" description wins, even though the "items" description is more deeply nested. This aligns to the expected behavior of preference in the json schema.
-* Fix selecte drop down menu update trigger.
+* Fix select drop down menu update trigger.
 * Add missing link to Tag display page.
 * Replace `replaceState` with `pushState` so forwards and backwards navigation actually work.
+* Add id and name for autocomplete options.
 
 ## 2.1
 * Add `x-locale` vendor extension to specify the locale of the spec.

diff --git a/src/components/api-request.js b/src/components/api-request.js
@@ -169,6 +169,8 @@ export default class ApiRequest extends LitElement {
             ? paramSchema.type === 'array' && html`
             <div style=" margin-top: 1rem; margin-bottom: 1rem;">    
               <tag-input class="request-param" 
+                autocomplete="on"
+                id = "request-param-${param.name}"
                 style = "width:100%;" 
                 data-ptype = "${paramLocation}"
                 data-pname = "${param.name}"
@@ -182,6 +184,8 @@ export default class ApiRequest extends LitElement {
             </div>`
             || paramSchema.type === 'object' && html`
               <textarea
+                autocomplete="on"
+                id = "request-param-${param.name}"
                 @input="${() => { this.computeCurlSyntax(); }}"
                 class = "textarea small request-param"
                 part = "textarea small textarea-param"
@@ -209,6 +213,8 @@ export default class ApiRequest extends LitElement {
               </select>`
             || html`
               <input type="${paramSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%; margin-top: 1rem; margin-bottom: 1rem;"
+                autocomplete="on"
+                id="request-param-${param.name}"
                 @input="${() => { this.computeCurlSyntax(); }}"
                 placeholder="${paramSchema.example || defaultVal || ''}"
                 class="request-param"
@@ -497,7 +503,9 @@ export default class ApiRequest extends LitElement {
     } else if (mediaFileRegex.test(this.selectedRequestBodyType) || textFileRegex.test(this.selectedRequestBodyType)) {
       reqBodyFileInputHtml = html`
         <div class = "small-font-size bold-text row">
-          <input type="file" part="file-input" style="max-width:100%" class="request-body-param-file" data-ptype="${reqBody.mimeType}" spellcheck="false" />
+          <input type="file"
+            name="request-body-file"
+            part="file-input" style="max-width:100%" class="request-body-param-file" data-ptype="${reqBody.mimeType}" spellcheck="false" />
         </div>  
       `;
     }

diff --git a/src/templates/security-scheme-template.js b/src/templates/security-scheme-template.js
@@ -343,7 +343,7 @@ function renderSecurityScheme(v) {
             </small>
           </div>`
           : !v.finalKeyValue ? html`
-              <input type="text" value="${v.value}" placeholder="${v.bearerFormat ?? 'api-token'}"
+              <input autocomplete="on" name="api-key" type="text" value="${v.value}" placeholder="${v.bearerFormat ?? 'api-token'}"
                 spellcheck="false" class="api-key-input fs-exclude" data-hj-suppress data-sl="mask">
               <button type="submit" class="m-btn thin-border" style = "margin-left:5px;"
                 part = "btn btn-outline"
@@ -375,8 +375,8 @@ function renderSecurityScheme(v) {
       <div style="padding-top: 1rem">${unsafeHTML(getI18nText('authentication.http-basic-desc'))}</div>
       <div style="height: 50px; margin-top: 1rem; padding: 10px 0; margin-bottom: 10px;">
         <form style="display:flex;">
-          <input type="text" value = "${v.user}" placeholder="${getI18nText('authentication.username')}" spellcheck="false" class="api-key-user" style="width:100px">
-          <input class="api-key-password fs-exclude" data-hj-suppress data-sl="mask"
+          <input autocomplete="on" name="api-key-user" type="text" value = "${v.user}" placeholder="${getI18nText('authentication.username')}" spellcheck="false" class="api-key-user" style="width:100px">
+          <input autocomplete="on" name="api-key-password" class="api-key-password fs-exclude" data-hj-suppress data-sl="mask"
             type="password" value = "${v.password}" placeholder="${getI18nText('authentication.password')}" spellcheck="false" style = "width:100px; margin:0 5px;">
           <button type="submit" class="m-btn thin-border"
             @click="${(e) => { onApiKeyChange.call(this, v.apiKeyId, e); }}"