From d7938ef6b3b207102df4750be3f8cfa1814c05f8 Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Wed, 16 Nov 2022 19:46:06 +0100
Subject: [PATCH] fix(input-tel-dropdown): fix interaction states

---
 .changeset/warm-forks-press.md                 |  5 +++++
 .../src/LionInputTelDropdown.js                | 18 +++++++++++++++---
 .../test-suites/LionInputTelDropdown.suite.js  |  3 +--
 .../components/input-tel/src/LionInputTel.js   |  2 --
 4 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/warm-forks-press.md

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'}"></${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;
     });
 
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();