From 710e7c3d9e00d81c4d98037485f2692f4ebb281f Mon Sep 17 00:00:00 2001
From: gvangeest <gerjan.van.geest@ing.com>
Date: Wed, 4 May 2022 11:35:53 +0200
Subject: [PATCH] fix(input-tel-dropdown): do not sync regionCode if
 countryCode is the same

---
 .changeset/old-ties-relax.md                  |  5 +++
 .changeset/poor-mugs-bow.md                   |  5 +++
 .../src/LionInputTelDropdown.js               | 17 ++++++--
 .../test-suites/LionInputTelDropdown.suite.js | 42 ++++++++++++++++---
 4 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/old-ties-relax.md
 create mode 100644 .changeset/poor-mugs-bow.md

diff --git a/.changeset/old-ties-relax.md b/.changeset/old-ties-relax.md
new file mode 100644
index 000000000..9ac5974cc
--- /dev/null
+++ b/.changeset/old-ties-relax.md
@@ -0,0 +1,5 @@
+---
+'@lion/input-tel-dropdown': patch
+---
+
+Do not sync regionCode from input to dropdown if the countryCode didn't change
diff --git a/.changeset/poor-mugs-bow.md b/.changeset/poor-mugs-bow.md
new file mode 100644
index 000000000..2108446ef
--- /dev/null
+++ b/.changeset/poor-mugs-bow.md
@@ -0,0 +1,5 @@
+---
+'@lion/input-tel-dropdown': patch
+---
+
+Only focus input on dropdownValue change if dropdown was opened. Otherwise it blocks user from use type ahead on the dropdown.
diff --git a/packages/input-tel-dropdown/src/LionInputTelDropdown.js b/packages/input-tel-dropdown/src/LionInputTelDropdown.js
index 7f96cc929..c95e02118 100644
--- a/packages/input-tel-dropdown/src/LionInputTelDropdown.js
+++ b/packages/input-tel-dropdown/src/LionInputTelDropdown.js
@@ -300,9 +300,6 @@ export class LionInputTelDropdown extends LionInputTel {
       setTimeout(() => {
         this._inputNode.focus();
       });
-    } else {
-      // For native select
-      this._inputNode.focus();
     }
   }
 
@@ -333,9 +330,23 @@ export class LionInputTelDropdown extends LionInputTel {
     if (!dropdownElement || !regionCode) {
       return;
     }
+    const inputCountryCode = this._phoneUtil?.getCountryCodeForRegionCode(regionCode);
+
     if ('modelValue' in dropdownElement) {
+      const dropdownCountryCode = this._phoneUtil?.getCountryCodeForRegionCode(
+        dropdownElement.modelValue,
+      );
+      if (dropdownCountryCode === inputCountryCode) {
+        return;
+      }
       /** @type {* & FormatHost} */ (dropdownElement).modelValue = regionCode;
     } else {
+      const dropdownCountryCode = this._phoneUtil?.getCountryCodeForRegionCode(
+        dropdownElement.value,
+      );
+      if (dropdownCountryCode === inputCountryCode) {
+        return;
+      }
       /** @type {HTMLSelectElement} */ (dropdownElement).value = regionCode;
     }
   }
diff --git a/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js b/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js
index d2cf31319..ce955643f 100644
--- a/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js
+++ b/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js
@@ -28,7 +28,7 @@ const fixtureSync = /** @type {(arg: string | TemplateResult) => LionInputTelDro
 );
 
 /**
- * @param {DropdownElement} dropdownEl
+ * @param {DropdownElement | HTMLSelectElement} dropdownEl
  * @returns {string}
  */
 function getDropdownValue(dropdownEl) {
@@ -183,18 +183,39 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
         expect(el.value).to.equal('+32612345678');
       });
 
-      it('focuses the textbox right after selection', async () => {
+      it('focuses the textbox right after selection if selected via opened dropdown', async () => {
         const el = await fixture(
           html` <${tag} .allowedRegions="${[
             'NL',
             'BE',
           ]}" .modelValue="${'+31612345678'}"></${tag}> `,
         );
+        const dropdownElement = el.refs.dropdown.value;
+        // @ts-expect-error [allow-protected-in-tests]
+        if (dropdownElement?._overlayCtrl) {
+          // @ts-expect-error [allow-protected-in-tests]
+          dropdownElement._overlayCtrl.show();
+          mimicUserChangingDropdown(dropdownElement, 'BE');
+          await el.updateComplete;
+          await aTimeout(0);
+          // @ts-expect-error [allow-protected-in-tests]
+          expect(el._inputNode).to.equal(document.activeElement);
+        }
+      });
+
+      it('keeps focus on dropdownElement after selection if selected via unopened dropdown', async () => {
+        const el = await fixture(
+          html` <${tag} .allowedRegions="${[
+            'NL',
+            'BE',
+          ]}" .modelValue="${'+31612345678'}"></${tag}> `,
+        );
+        const dropdownElement = el.refs.dropdown.value;
         // @ts-ignore
-        mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
+        mimicUserChangingDropdown(dropdownElement, 'BE');
         await el.updateComplete;
-        // @ts-expect-error
-        expect(el._inputNode).to.equal(document.activeElement);
+        // @ts-expect-error [allow-protected-in-tests]
+        expect(el._inputNode).to.not.equal(document.activeElement);
       });
 
       it('prefills country code when textbox is empty', async () => {
@@ -218,6 +239,17 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
           'BE',
         );
       });
+
+      it('keeps dropdown value if countryCode is the same', async () => {
+        const el = await fixture(html` <${tag} .modelValue="${'+12345678901'}"></${tag}> `);
+        expect(el.activeRegion).to.equal('US');
+        // @ts-expect-error [allow-protected-in test]
+        el._setActiveRegion('AG'); // Also +1
+        await el.updateComplete;
+        expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
+          'US',
+        );
+      });
     });
   });
 }