feat(ld-input): autocomplete support for input field

The input component now copies the autocomplete setting from the outer form and overwrites the setting with its own autocomplete setting when given.
emdgroup-liquid · Nov 11, 2021 · b88369f · b88369f
1 parent ac77192
commit b88369f
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 19 deletions.
diff --git a/src/liquid/components/ld-input/ld-input.tsx b/src/liquid/components/ld-input/ld-input.tsx
@@ -46,6 +46,9 @@ export class LdInput implements InnerFocusable {
   /** The input placeholder. */
   @Prop() placeholder: string
 
+  /** Hint for form autofill feature. */
+  @Prop({ mutable: true, reflect: true }) autocomplete: string
+
   /** The input type. */
   @Prop() type: string
 
@@ -78,15 +81,21 @@ export class LdInput implements InnerFocusable {
   componentWillLoad() {
     const outerForm = this.el.closest('form')
 
-    if (outerForm && this.name) {
-      this.hiddenInput = document.createElement('input')
-      this.hiddenInput.type = 'hidden'
-      this.hiddenInput.name = this.name
-      if (this.value) {
-        this.hiddenInput.value = this.value
+    if (outerForm) {
+      if (!this.autocomplete) {
+        this.autocomplete = outerForm.getAttribute('autocomplete')
       }
 
-      this.el.appendChild(this.hiddenInput)
+      if (this.name) {
+        this.hiddenInput = document.createElement('input')
+        this.hiddenInput.type = 'hidden'
+        this.hiddenInput.name = this.name
+        if (this.value) {
+          this.hiddenInput.value = this.value
+        }
+
+        this.el.appendChild(this.hiddenInput)
+      }
     }
 
     this.el.querySelectorAll('ld-button').forEach((button) => {
@@ -217,6 +226,7 @@ export class LdInput implements InnerFocusable {
           ref={(el) => (this.input = el)}
           type={this.type}
           {...cloneAttributes(this.el)}
+          autocomplete={this.autocomplete}
           value={this.value}
         />
         {this.type === 'file' && (

diff --git a/src/liquid/components/ld-input/readme.md b/src/liquid/components/ld-input/readme.md
@@ -999,18 +999,19 @@ The `ld-input` Web Component does not provide any properties or methods for vali
 
 ## Properties
 
-| Property      | Attribute     | Description                                                                                                           | Type               | Default     |
-| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------- |
-| `invalid`     | `invalid`     | Set this property to `true` in order to mark the field visually as invalid.                                           | `boolean`          | `undefined` |
-| `key`         | `key`         | for tracking the node's identity when working with lists                                                              | `string \| number` | `undefined` |
-| `multiline`   | `multiline`   | Uses textarea instead of input internally. Setting this attribute to true disables the attribute type and both slots. | `boolean`          | `undefined` |
-| `name`        | `name`        | Used to specify the name of the control.                                                                              | `string`           | `undefined` |
-| `placeholder` | `placeholder` | The input placeholder.                                                                                                | `string`           | `undefined` |
-| `ref`         | `ref`         | reference to component                                                                                                | `any`              | `undefined` |
-| `size`        | `size`        | Size of the input.                                                                                                    | `"lg" \| "sm"`     | `undefined` |
-| `tone`        | `tone`        | Input tone. Use `'dark'` on white backgrounds. Default is a light tone.                                               | `"dark"`           | `undefined` |
-| `type`        | `type`        | The input type.                                                                                                       | `string`           | `undefined` |
-| `value`       | `value`       | The input value.                                                                                                      | `string`           | `undefined` |
+| Property       | Attribute      | Description                                                                                                           | Type               | Default     |
+| -------------- | -------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------- |
+| `autocomplete` | `autocomplete` | Hint for form autofill feature.                                                                                       | `string`           | `undefined` |
+| `invalid`      | `invalid`      | Set this property to `true` in order to mark the field visually as invalid.                                           | `boolean`          | `undefined` |
+| `key`          | `key`          | for tracking the node's identity when working with lists                                                              | `string \| number` | `undefined` |
+| `multiline`    | `multiline`    | Uses textarea instead of input internally. Setting this attribute to true disables the attribute type and both slots. | `boolean`          | `undefined` |
+| `name`         | `name`         | Used to specify the name of the control.                                                                              | `string`           | `undefined` |
+| `placeholder`  | `placeholder`  | The input placeholder.                                                                                                | `string`           | `undefined` |
+| `ref`          | `ref`          | reference to component                                                                                                | `any`              | `undefined` |
+| `size`         | `size`         | Size of the input.                                                                                                    | `"lg" \| "sm"`     | `undefined` |
+| `tone`         | `tone`         | Input tone. Use `'dark'` on white backgrounds. Default is a light tone.                                               | `"dark"`           | `undefined` |
+| `type`         | `type`         | The input type.                                                                                                       | `string`           | `undefined` |
+| `value`        | `value`        | The input value.                                                                                                      | `string`           | `undefined` |
 
 
 ## Methods

diff --git a/src/liquid/components/ld-input/test/__snapshots__/ld-input.spec.ts.snap b/src/liquid/components/ld-input/test/__snapshots__/ld-input.spec.ts.snap
@@ -1,5 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ld-input copies form autocomplete attribute, if it has not one of its own 1`] = `
+<ld-input autocomplete="off" class="ld-input" name="example">
+  <mock:shadow-root>
+    <slot name="start"></slot>
+    <input autocomplete="off" part="input focusable">
+    <slot name="end"></slot>
+  </mock:shadow-root>
+  <input name="example" type="hidden">
+</ld-input>
+`;
+
 exports[`ld-input creates hidden input field, if inside a form 1`] = `
 <ld-input class="ld-input" name="example">
   <mock:shadow-root>
@@ -245,3 +256,14 @@ exports[`ld-input updates value prop on value change 1`] = `
   </mock:shadow-root>
 </ld-input>
 `;
+
+exports[`ld-input uses own autocomplete attribute even if the form has a different one 1`] = `
+<ld-input autocomplete="name" class="ld-input" name="example">
+  <mock:shadow-root>
+    <slot name="start"></slot>
+    <input autocomplete="name" part="input focusable">
+    <slot name="end"></slot>
+  </mock:shadow-root>
+  <input name="example" type="hidden">
+</ld-input>
+`;
diff --git a/src/liquid/components/ld-input/test/ld-input.spec.ts b/src/liquid/components/ld-input/test/ld-input.spec.ts
@@ -284,6 +284,24 @@ describe('ld-input', () => {
     expect(root).toMatchSnapshot()
   })
 
+  it('copies form autocomplete attribute, if it has not one of its own', async () => {
+    const { root, waitForChanges } = await newSpecPage({
+      components: [LdInput],
+      html: `<form autocomplete="off"><ld-input name="example" /></form>`,
+    })
+    await waitForChanges()
+    expect(root).toMatchSnapshot()
+  })
+
+  it('uses own autocomplete attribute even if the form has a different one', async () => {
+    const { root, waitForChanges } = await newSpecPage({
+      components: [LdInput],
+      html: `<form autocomplete="off"><ld-input name="example" autocomplete="name" /></form>`,
+    })
+    await waitForChanges()
+    expect(root).toMatchSnapshot()
+  })
+
   it('fills hidden input field with initial value', async () => {
     const { root } = await newSpecPage({
       components: [LdInput],