fix(field): interaction states initialized after registration ready

This commit is contained in:
Thijs Louisse 2020-02-20 11:48:45 +01:00
parent cb7120e3a5
commit d6829ef619
2 changed files with 16 additions and 8 deletions

View file

@ -24,15 +24,13 @@ export const InteractionStateMixin = dedupeMixin(
type: Boolean, type: Boolean,
reflect: true, reflect: true,
}, },
/** /**
* True when user has typed in something in the input field. * True when user has changed the value of the field.
*/ */
dirty: { dirty: {
type: Boolean, type: Boolean,
reflect: true, reflect: true,
}, },
/** /**
* True when user has left non-empty field or input is prefilled. * True when user has left non-empty field or input is prefilled.
* The name must be seen from the point of view of the input field: * The name must be seen from the point of view of the input field:
@ -112,9 +110,8 @@ export const InteractionStateMixin = dedupeMixin(
* Since this method will be called twice in last mentioned scenario, it must stay idempotent. * Since this method will be called twice in last mentioned scenario, it must stay idempotent.
*/ */
initInteractionState() { initInteractionState() {
if (this.constructor._isPrefilled(this.modelValue)) { this.dirty = false;
this.prefilled = true; this.prefilled = this.constructor._isPrefilled(this.modelValue);
}
} }
/** /**

View file

@ -15,11 +15,10 @@ export function runInteractionStateMixinSuite(customConfig) {
const cfg = { const cfg = {
tagString: null, tagString: null,
allowedModelValueTypes: [Array, Object, Number, Boolean, String, Date], allowedModelValueTypes: [Array, Object, Number, Boolean, String, Date],
suffix: '',
...customConfig, ...customConfig,
}; };
describe(`InteractionStateMixin ${cfg.suffix ? `(${cfg.suffix})` : ''}`, async () => { describe(`InteractionStateMixin`, async () => {
let tag; let tag;
before(() => { before(() => {
if (!cfg.tagString) { if (!cfg.tagString) {
@ -174,6 +173,18 @@ export function runInteractionStateMixinSuite(customConfig) {
expect(el.prefilled).to.be.true; expect(el.prefilled).to.be.true;
}); });
it('has a method initInteractionState()', async () => {
const el = await fixture(html`<${tag}></${tag}>`);
el.modelValue = 'Some value';
expect(el.dirty).to.be.true;
expect(el.touched).to.be.false;
expect(el.prefilled).to.be.false;
el.initInteractionState();
expect(el.dirty).to.be.false;
expect(el.touched).to.be.false;
expect(el.prefilled).to.be.true;
});
describe('SubClassers', () => { describe('SubClassers', () => {
it('can override the `_leaveEvent`', async () => { it('can override the `_leaveEvent`', async () => {
const tagLeaveString = defineCE( const tagLeaveString = defineCE(