Fix: dropdown arrow jumps when geoIpLookup completes

jackocnr · Aug 15, 2024 · 4bc42c6 · 4bc42c6
1 parent 8e0b196
commit 4bc42c6
Show file tree

Hide file tree

Showing 15 changed files with 16 additions and 15 deletions.
diff --git a/build/css/intlTelInput.css b/build/css/intlTelInput.css
@@ -236,7 +236,7 @@
 }
 
 .iti__flag {
-  --iti-flag-offset: 0px;
+  --iti-flag-offset: 100px;
   --iti-flag-width: 20px;
   --iti-flag-height: 14px;
   height: var(--iti-flag-height);

diff --git a/build/js/intlTelInput.js b/build/js/intlTelInput.js
@@ -1730,7 +1730,7 @@ var factoryOutput = (() => {
           );
         }
         const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-        this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
+        this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
         this.selectedCountryA11yText = createEl(
           "span",
           { class: "iti__a11y-text" },

diff --git a/build/js/intlTelInput.min.js b/build/js/intlTelInput.min.js
diff --git a/build/js/intlTelInputWithUtils.js b/build/js/intlTelInputWithUtils.js
@@ -1729,7 +1729,7 @@ var factoryOutput = (() => {
           );
         }
         const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-        this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
+        this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
         this.selectedCountryA11yText = createEl(
           "span",
           { class: "iti__a11y-text" },

diff --git a/build/js/intlTelInputWithUtils.min.js b/build/js/intlTelInputWithUtils.min.js
diff --git a/react/build/IntlTelInput.cjs b/react/build/IntlTelInput.cjs
@@ -1725,7 +1725,7 @@ var Iti = class {
         );
       }
       const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-      this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
+      this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
       this.selectedCountryA11yText = createEl(
         "span",
         { class: "iti__a11y-text" },

diff --git a/react/build/IntlTelInput.js b/react/build/IntlTelInput.js
@@ -1689,7 +1689,7 @@ var Iti = class {
         );
       }
       const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-      this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
+      this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
       this.selectedCountryA11yText = createEl(
         "span",
         { class: "iti__a11y-text" },

diff --git a/react/build/IntlTelInputWithUtils.cjs b/react/build/IntlTelInputWithUtils.cjs
@@ -1725,7 +1725,7 @@ var Iti = class {
         );
       }
       const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-      this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
+      this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
       this.selectedCountryA11yText = createEl(
         "span",
         { class: "iti__a11y-text" },

diff --git a/react/build/IntlTelInputWithUtils.js b/react/build/IntlTelInputWithUtils.js
@@ -1689,7 +1689,7 @@ var Iti = class {
         );
       }
       const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-      this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
+      this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
       this.selectedCountryA11yText = createEl(
         "span",
         { class: "iti__a11y-text" },

diff --git a/react/demo/set-number-bundle.js b/react/demo/set-number-bundle.js
@@ -25218,7 +25218,7 @@
           );
         }
         const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-        this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
+        this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
         this.selectedCountryA11yText = createEl(
           "span",
           { class: "iti__a11y-text" },

diff --git a/react/demo/simple-bundle.js b/react/demo/simple-bundle.js
@@ -25218,7 +25218,7 @@
           );
         }
         const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-        this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
+        this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
         this.selectedCountryA11yText = createEl(
           "span",
           { class: "iti__a11y-text" },

diff --git a/react/demo/toggle-disabled-bundle.js b/react/demo/toggle-disabled-bundle.js
@@ -25218,7 +25218,7 @@
           );
         }
         const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-        this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
+        this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
         this.selectedCountryA11yText = createEl(
           "span",
           { class: "iti__a11y-text" },

diff --git a/react/demo/validation-bundle.js b/react/demo/validation-bundle.js
@@ -25218,7 +25218,7 @@
           );
         }
         const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-        this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
+        this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
         this.selectedCountryA11yText = createEl(
           "span",
           { class: "iti__a11y-text" },

diff --git a/src/css/intlTelInput.scss b/src/css/intlTelInput.scss
@@ -346,7 +346,8 @@
 }
 
 .iti__flag {
-  --iti-flag-offset: 0px;
+  //* Start with an offset to hide any flags. This is useful to show an empty state (with correct dimensions) while geoIpLookup is loading.
+  --iti-flag-offset: 100px;
   --iti-flag-width: #{$most-common-flag-width};
   --iti-flag-height: #{$most-common-flag-height};
 

diff --git a/src/js/intl-tel-input.ts b/src/js/intl-tel-input.ts
@@ -852,7 +852,7 @@ export class Iti {
       const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
 
       //* This is where we will add the selected flag (or globe) class later
-      this.selectedCountryInner = createEl("div", null, selectedCountryPrimary);
+      this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
       this.selectedCountryA11yText = createEl(
         "span",
         { class: "iti__a11y-text" },