diff --git a/.changeset/warm-forks-press.md b/.changeset/warm-forks-press.md new file mode 100644 index 000000000..1f1972650 --- /dev/null +++ b/.changeset/warm-forks-press.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +Align with SlotMixin rerender functionality + fix interaction state synchronization diff --git a/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js b/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js index e65b2b9c5..d59966f27 100644 --- a/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js +++ b/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js @@ -174,9 +174,7 @@ export class LionInputTelDropdown extends LionInputTel { ...super.slots, prefix: () => { const ctor = /** @type {typeof LionInputTelDropdown} */ (this.constructor); - // If the user locally overrode the templates, get those on the instance - // @ts-expect-error - const templates = this.templates || ctor.templates; + const { templates } = ctor; return { 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; + } } diff --git a/packages/ui/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js b/packages/ui/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js index c0365051c..f1e303cb8 100644 --- a/packages/ui/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js +++ b/packages/ui/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js @@ -112,8 +112,7 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo it('sets correct interaction states on init if input has a value', async () => { const el = await fixture(html` <${tag} .modelValue="${'+31612345678'}"> `); - // 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; }); diff --git a/packages/ui/components/input-tel/src/LionInputTel.js b/packages/ui/components/input-tel/src/LionInputTel.js index 3932b3e65..3aebe6a09 100644 --- a/packages/ui/components/input-tel/src/LionInputTel.js +++ b/packages/ui/components/input-tel/src/LionInputTel.js @@ -305,8 +305,6 @@ export class LionInputTel extends LocalizeMixin(LionInput) { // This should trigger a rerender in shadow dom this._phoneUtil = /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil); // This should trigger a rerender in light dom - // this._scheduleLightDomRender(); - // this._scheduleSlotRenderFor('prefix'); // Format when libPhoneNumber is loaded this._calculateValues({ source: null }); this.__calculateActiveRegion();