diff --git a/packages/field/src/LionField.js b/packages/field/src/LionField.js index ba4cf1bf3..c87118525 100644 --- a/packages/field/src/LionField.js +++ b/packages/field/src/LionField.js @@ -49,6 +49,10 @@ export class LionField extends FormControlMixin( type: String, reflect: true, }, + autocomplete: { + type: String, + reflect: true, + }, }; } @@ -141,6 +145,10 @@ export class LionField extends FormControlMixin( if (changedProps.has('name')) { this.inputElement.name = this.name; } + + if (changedProps.has('autocomplete')) { + this.inputElement.autocomplete = this.autocomplete; + } } /** diff --git a/packages/field/test/lion-field.test.js b/packages/field/test/lion-field.test.js index 1377359ff..7b0f05e98 100644 --- a/packages/field/test/lion-field.test.js +++ b/packages/field/test/lion-field.test.js @@ -124,6 +124,17 @@ describe('', () => { expect(el.$$slot('input').value).to.equal('one'); }); + // This is necessary for security, so that inputElements autocomplete can be set to 'off' + it('delegates autocomplete property', async () => { + const el = await fixture(html`<${tag}>${inputSlot}`); + expect(el.inputElement.autocomplete).to.equal(''); + expect(el.inputElement.hasAttribute('autocomplete')).to.be.false; + el.autocomplete = 'off'; + await el.updateComplete; + expect(el.inputElement.autocomplete).to.equal('off'); + expect(el.inputElement.getAttribute('autocomplete')).to.equal('off'); + }); + // TODO: find out if we could put all listeners on this.value (instead of this.inputElement.value) // and make it act on this.value again it('has a class "state-filled" if this.value is filled', async () => {