ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(field): sync type down instead of delegating

Browse source
This commit is contained in:
Thomas Allmer 2019-08-06 18:37:35 +02:00 committed by Joren Broekema
parent d2f4e3c1f2
commit 13b27407b5
2 changed files with 22 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
packages/field/src/LionField.js
View file

@ -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;
}
}
/**

29
packages/field/test/lion-field.test.js
View file

@ -128,6 +128,18 @@ describe('<lion-field>', () => {
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}</${tagString}>`);
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('<lion-field>', () => {
expect(el.inputElement.value).to.equal('one');
});
it('delegates property type', async () => {
const el = await fixture(`<${tagString} type="text">${inputSlotString}</${tagString}>`);
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}