diff --git a/src/liquid/components/ld-input/ld-input.tsx b/src/liquid/components/ld-input/ld-input.tsx
index db0d836e69..654988bbd2 100644
--- 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
index 0702946e18..c811dfc659 100644
--- 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
index 784af7c766..080a82704c 100644
--- 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`] = `
+
+
+
+
+
+
+
+
+`;
+
exports[`ld-input creates hidden input field, if inside a form 1`] = `
@@ -245,3 +256,14 @@ exports[`ld-input updates value prop on value change 1`] = `
`;
+
+exports[`ld-input uses own autocomplete attribute even if the form has a different one 1`] = `
+
+
+
+
+
+
+
+
+`;
diff --git a/src/liquid/components/ld-input/test/ld-input.spec.ts b/src/liquid/components/ld-input/test/ld-input.spec.ts
index 08649e54eb..5390e0f8b3 100644
--- 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: ``,
+ })
+ 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: ``,
+ })
+ await waitForChanges()
+ expect(root).toMatchSnapshot()
+ })
+
it('fills hidden input field with initial value', async () => {
const { root } = await newSpecPage({
components: [LdInput],