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

fix(input-tel-dropdown): fix interaction states

Browse source
This commit is contained in:
Thijs Louisse 2022-11-16 19:46:06 +01:00 committed by Thomas Allmer
parent ae06eb01f3
commit d7938ef6b3
4 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/warm-forks-press.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
Align with SlotMixin rerender functionality + fix interaction state synchronization

18
packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js
View file

@ -174,9 +174,7 @@ export class LionInputTelDropdown extends LionInputTel {
...super.slots, ...super.slots,
prefix: () => { prefix: () => {
const ctor = /** @type {typeof LionInputTelDropdown} */ (this.constructor); const ctor = /** @type {typeof LionInputTelDropdown} */ (this.constructor);
// If the user locally overrode the templates, get those on the instance const { templates } = ctor;
// @ts-expect-error
const templates = this.templates || ctor.templates;
return { return {
template: templates.dropdown(this._templateDataDropdown), template: templates.dropdown(this._templateDataDropdown),
@ -430,4 +428,18 @@ export class LionInputTelDropdown extends LionInputTel {
}); });
}); });
} }
/**
* Usually, we don't use composition in regular LionFields (non choice-groups). Here we use a LionSelect(Rich) inside.
* We don't want to repropagate any children, since an Application Developer is not concerned with these internals (see repropate logic in FormControlMixin)
* Also, we don't want to give (wrong) info to InteractionStateMixin, that will set the wrong interaction states based on child info.
* TODO: Make "this._repropagationRole !== 'child'" the default for FormControlMixin
* (so that FormControls used within are never repropagated for LionFields)
* @protected
* @configure FormControlMixin: don't repropagate any children
*/
// eslint-disable-next-line class-methods-use-this
_repropagationCondition() {
return false;
}
} }

3
packages/ui/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js
View file

@ -112,8 +112,7 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
it('sets correct interaction states on init if input has a value', async () => { it('sets correct interaction states on init if input has a value', async () => {
const el = await fixture(html` <${tag} .modelValue="${'+31612345678'}"></${tag}> `); const el = await fixture(html` <${tag} .modelValue="${'+31612345678'}"></${tag}> `);
// TODO find out why its get dirty again expect(el.dirty).to.be.false;
// expect(el.dirty).to.be.false;
expect(el.prefilled).to.be.true; expect(el.prefilled).to.be.true;
}); });

2
packages/ui/components/input-tel/src/LionInputTel.js
View file

@ -305,8 +305,6 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
// This should trigger a rerender in shadow dom // This should trigger a rerender in shadow dom
this._phoneUtil = /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil); this._phoneUtil = /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil);
// This should trigger a rerender in light dom // This should trigger a rerender in light dom
// this._scheduleLightDomRender();
// this._scheduleSlotRenderFor('prefix');
// Format when libPhoneNumber is loaded // Format when libPhoneNumber is loaded
this._calculateValues({ source: null }); this._calculateValues({ source: null });
this.__calculateActiveRegion(); this.__calculateActiveRegion();