fix: phone field dropdown bugs

Author: muhammad-ali-pk

package.json

@@ -39,7 +39,7 @@
     "flickity": "^3.0.0",
     "formik": "^2.4.6",
     "fuse.js": "^6.6.2",
-    "intl-tel-input": "17.0.21",
+    "intl-tel-input": "24.3.5",
     "leaflet": "1.9.4",
     "lottie-web": "^5.13.0",
     "postcss": "8.5.6",

postcss.config.js

@@ -23,7 +23,8 @@ let config = {
         "node_modules/flickity/dist/flickity.pkgd.min.js",
         "node_modules/leaflet/dist/leaflet.js",
         "node_modules/venobox/dist/venobox.min.js",
-        "node_modules/vanilla-framework/templates/_macros/*.jinja"
+        "node_modules/vanilla-framework/templates/_macros/*.jinja",
+        "node_modules/intl-tel-input/build/js/utils.js"
       ],
       defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
       safelist: {

static/js/prepare-form-inputs.js

@@ -56,10 +56,11 @@ function preFormatCountry(countryCode, countryInput, noPreselect) {
  * @param {HTMLInputElement} phoneInput - The input element for the phone number.
  */
 export function setupIntlTelInput(countryCode, phoneInput) {
+  const inputName = phoneInput.name;
   iti = intlTelInput(phoneInput, {
     utilsScript: "/static/js/modules/intl-tel-input/utils.js",
     separateDialCode: true,
-    hiddenInput: phoneInput.name,
+    hiddenInput: () => ({ phone: inputName, country: `${inputName}_country` }),
     initialCountry: countryCode,
   });
 

static/sass/styles.scss

@@ -127,15 +127,25 @@ $p-small-lh-diff: map-get($line-heights, default-text) -
 
 // Overide the path to flags for dial codes
 .iti__flag {
-  background-image: url("#{$assets-path}21572c97-flags.png");
+  background-image: url("#{$assets-path}685bc1a3-flags.png");
 }
+
 // stylelint-disable-next-line media-feature-name-no-vendor-prefix
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .iti__flag {
-    background-image: url("#{$assets-path}d6f84371-flags%402x.png");
+    background-image: url("#{$assets-path}01807c27-flags@2x.png");
   }
 }
 
+// Override dropdown background colours to match theme
+.iti__dropdown-content {
+  background-color: $colors--theme--background-default;
+}
+
+.iti__country.iti__highlight {
+  background-color: $colors--theme--background-hover;
+}
+
 .iti {
   margin-bottom: $input-margin-bottom;
   width: 100%;

yarn.lock

@@ -3191,10 +3191,10 @@ internal-slot@^1.1.0:
     hasown "^2.0.2"
     side-channel "^1.1.0"
 
-intl-tel-input@17.0.21:
-  version "17.0.21"
-  resolved "https://registry.npmjs.org/intl-tel-input/-/intl-tel-input-17.0.21.tgz"
-  integrity sha512-TfyPxLe41QZPOf6RqBxRE2dpQ0FThB/PBD/gRbxVhGW7IuYg30QD90x/vjmEo4vkZw7j8etxpVcjIZVRcG+Otw==
+intl-tel-input@24.3.5:
+  version "24.3.5"
+  resolved "https://registry.yarnpkg.com/intl-tel-input/-/intl-tel-input-24.3.5.tgz#cccf416a5a8a4c6b998beaef13e182402e9123ef"
+  integrity sha512-GBKgq1c4rx+4eq7CkKxoKC00Jd/27U/hGno+1jTlQimfxa6TBzEEpeMUJd/AG1CYu9U9I2gnAsm1wDh/3Hw9og==
 
 ip-address@^10.0.1:
   version "10.1.0"