feat(autocomplete): add html5 autocomplete functionality #334

AlaskaAirlines · Sep 30, 2024 · f280e8f · f280e8f
1 parent 89a5f20
commit f280e8f
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 0 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -33,6 +33,7 @@
 |-----------------------------------|-----------------------------------|-----------|----------------------------|--------------------------------------------------|
 | [activeLabel](#activeLabel)                     | `activeLabel`                     | `Boolean` | false                      | If set, the label will remain fixed in the active position. |
 | [autocapitalize](#autocapitalize)                  | `autocapitalize`                  | `String`  |                            | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] |
+| [autocomplete](#autocomplete)                    | `autocomplete`                    | `String`  |                            | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
 | [autocorrect](#autocorrect)                     | `autocorrect`                     | `String`  |                            | When set to `off`, stops iOS from auto correcting words when typed into a text box. |
 | [customValidityTypeEmail](#customValidityTypeEmail)         | `customValidityTypeEmail`         | `string`  |                            |                                                  |
 | [disabled](#disabled)                        | `disabled`                        | `Boolean` | false                      | If set, disables the input.                      |

diff --git a/docs/api.md b/docs/api.md
@@ -13,6 +13,7 @@
 |-----------------------------------|-----------------------------------|-----------|----------------------------|--------------------------------------------------|
 | `activeLabel`                     | `activeLabel`                     | `Boolean` | false                      | If set, the label will remain fixed in the active position. |
 | `autocapitalize`                  | `autocapitalize`                  | `String`  |                            | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] |
+| `autocomplete`                    | `autocomplete`                    | `String`  |                            | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
 | `autocorrect`                     | `autocorrect`                     | `String`  |                            | When set to `off`, stops iOS from auto correcting words when typed into a text box. |
 | `customValidityTypeEmail`         | `customValidityTypeEmail`         | `string`  |                            |                                                  |
 | `disabled`                        | `disabled`                        | `Boolean` | false                      | If set, disables the input.                      |

diff --git a/src/auro-input.js b/src/auro-input.js
@@ -127,6 +127,7 @@ export class AuroInput extends BaseInput {
             spellcheck="${ifDefined(this.spellcheck ? this.spellcheck : undefined)}"
             autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
             autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
+            autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
             part="input"
             />
         </div>

diff --git a/src/base-input.js b/src/base-input.js
@@ -22,6 +22,7 @@ import AuroFormValidation from '@aurodesignsystem/auro-formvalidation/src/valida
  *
  * @attr {Boolean} activeLabel - If set, the label will remain fixed in the active position.
  * @attr {String}  autocapitalize - An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters]
+ * @attr {String}  autocomplete - An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
  * @attr {String}  autocorrect - When set to `off`, stops iOS from auto correcting words when typed into a text box.
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
@@ -173,6 +174,10 @@ export default class BaseInput extends LitElement {
       spellcheck:              { type: String },
       autocorrect:             { type: String },
       autocapitalize:          { type: String },
+      autocomplete:            {
+        type: String,
+        reflect: true
+      },
       placeholder:             { type: String },
       activeLabel:             {
         type: Boolean,