diff --git a/packages/field/src/LionField.js b/packages/field/src/LionField.js index d4425308e..82c35b5f1 100644 --- a/packages/field/src/LionField.js +++ b/packages/field/src/LionField.js @@ -47,8 +47,8 @@ export class LionField extends FormControlMixin( return { ...super.delegations, target: () => this.inputElement, - properties: [...super.delegations.properties, 'name', 'type'], - attributes: [...super.delegations.attributes, 'name', 'type'], + properties: [...super.delegations.properties, 'type'], + attributes: [...super.delegations.attributes, 'type'], }; } @@ -58,6 +58,10 @@ export class LionField extends FormControlMixin( // make sure validation can be triggered based on observer type: Boolean, }, + name: { + type: String, + reflect: true, + }, }; } @@ -104,6 +108,12 @@ export class LionField extends FormControlMixin( return (this.inputElement && this.inputElement.value) || ''; } + constructor() { + super(); + this.name = ''; + this.submitted = false; + } + connectedCallback() { super.connectedCallback(); @@ -138,6 +148,10 @@ export class LionField extends FormControlMixin( this.classList.remove('state-disabled'); // eslint-disable-line wc/no-self-class } } + + if (changedProps.has('name')) { + this.inputElement.name = this.name; + } } /** diff --git a/packages/field/test/lion-field.test.js b/packages/field/test/lion-field.test.js index d35988db4..856b8bf42 100644 --- a/packages/field/test/lion-field.test.js +++ b/packages/field/test/lion-field.test.js @@ -116,6 +116,18 @@ describe('', () => { expect(el.$$slot('input').value).to.equal('one'); }); + it('has a name which is reflected to an attribute and is synced down to the native input', async () => { + const el = await fixture(`<${tagString}>${inputSlotString}`); + expect(el.name).to.equal(''); + expect(el.getAttribute('name')).to.equal(''); + expect(el.inputElement.getAttribute('name')).to.equal(''); + + el.name = 'foo'; + await el.updateComplete; + expect(el.getAttribute('name')).to.equal('foo'); + expect(el.inputElement.getAttribute('name')).to.equal('foo'); + }); + // 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 () => {