diff --git a/packages/field/src/LionField.js b/packages/field/src/LionField.js index 82c35b5f1..f175c48a2 100644 --- a/packages/field/src/LionField.js +++ b/packages/field/src/LionField.js @@ -1,4 +1,4 @@ -import { DelegateMixin, SlotMixin, LitElement } from '@lion/core'; +import { SlotMixin, LitElement } from '@lion/core'; import { ElementMixin } from '@lion/core/src/ElementMixin.js'; import { DisabledMixin } from '@lion/core/src/DisabledMixin.js'; import { ObserverMixin } from '@lion/core/src/ObserverMixin.js'; @@ -35,23 +35,10 @@ import { FocusMixin } from './FocusMixin.js'; export class LionField extends FormControlMixin( InteractionStateMixin( FocusMixin( - FormatMixin( - ValidateMixin( - DisabledMixin(ElementMixin(DelegateMixin(SlotMixin(ObserverMixin(LitElement))))), - ), - ), + FormatMixin(ValidateMixin(DisabledMixin(ElementMixin(SlotMixin(ObserverMixin(LitElement)))))), ), ), ) { - get delegations() { - return { - ...super.delegations, - target: () => this.inputElement, - properties: [...super.delegations.properties, 'type'], - attributes: [...super.delegations.attributes, 'type'], - }; - } - static get properties() { return { submitted: { @@ -62,6 +49,10 @@ export class LionField extends FormControlMixin( type: String, reflect: true, }, + type: { + type: String, + reflect: true, + }, }; } @@ -112,6 +103,7 @@ export class LionField extends FormControlMixin( super(); this.name = ''; this.submitted = false; + this.type = 'text'; } connectedCallback() { @@ -152,6 +144,9 @@ export class LionField extends FormControlMixin( if (changedProps.has('name')) { this.inputElement.name = this.name; } + if (changedProps.has('type')) { + this.inputElement.type = this.type; + } } /** diff --git a/packages/field/test/lion-field.test.js b/packages/field/test/lion-field.test.js index 856b8bf42..a6d832edd 100644 --- a/packages/field/test/lion-field.test.js +++ b/packages/field/test/lion-field.test.js @@ -128,6 +128,18 @@ describe('', () => { expect(el.inputElement.getAttribute('name')).to.equal('foo'); }); + it('has a type which is reflected to an attribute and is synced down to the native input', async () => { + const el = await fixture(`<${tagString}>${inputSlotString}`); + expect(el.type).to.equal('text'); + expect(el.getAttribute('type')).to.equal('text'); + expect(el.inputElement.getAttribute('type')).to.equal('text'); + + el.type = 'foo'; + await el.updateComplete; + expect(el.getAttribute('type')).to.equal('foo'); + expect(el.inputElement.getAttribute('type')).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 () => { @@ -397,23 +409,6 @@ describe('', () => { expect(el.inputElement.value).to.equal('one'); }); - it('delegates property type', async () => { - const el = await fixture(`<${tagString} type="text">${inputSlotString}`); - const inputElemTag = el.inputElement.tagName.toLowerCase(); - if (inputElemTag === 'select') { - // TODO: later on we might want to support multi select ? - expect(el.inputElement.type).to.contain('select-one'); - } else if (inputElemTag === 'textarea') { - expect(el.inputElement.type).to.contain('textarea'); - } else { - // input or custom inputElement - expect(el.inputElement.type).to.contain('text'); - el.type = 'password'; - expect(el.type).to.equal('password'); - expect(el.inputElement.type).to.equal('password'); - } - }); - it('delegates property selectionStart and selectionEnd', async () => { const el = await fixture(html` <${tag}