@descope/web-components-ui 3.1.10 → 3.1.12

package/dist/index.esm.js

@@ -11201,12 +11201,21 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$a {
       return;
     }
 
-    // resolve country code from dial code
-    const countryCode = CountryCodes.find((c) => c.dialCode === dialCode)?.code;
+    // Collect all country codes sharing this dial code from CountryCodes (e.g. US, CA, DO, ... for +1)
+    const matchingCountryCodes = CountryCodes.filter((c) => c.dialCode === dialCode).map(
+      (c) => c.code
+    );
 
-    // sync combo box when country changes
-    if (countryCode && countryCode !== this.selectedCountryCode) {
-      this.comboBox.selectedItem = this.#getCountryItemByCodeId(countryCode);
+    // Check if the currently selected country's data-country-code is in that set
+    const currentSelectedCountryCode = this.selectedCountryCode;
+    if (!matchingCountryCodes.includes(currentSelectedCountryCode)) {
+      // If not, find the first combo box item (restricted list) whose data-country-code is in the set
+      const matchingItem = this.comboBox.items?.find((c) =>
+        matchingCountryCodes.includes(c.getAttribute('data-country-code'))
+      );
+      if (matchingItem) {
+        this.comboBox.selectedItem = matchingItem;
+      }
     }
 
     // set formatted or raw national number on the text field
@@ -19155,13 +19164,21 @@ class RawHybridField extends BaseClass$6 {
     });
   }
 
+  #getDefaultDialCode() {
+    const code = this.getAttribute('default-code');
+    const match = code && PhoneFieldClass.CountryCodes.find((c) => c.code === code);
+    return match?.dialCode || PhoneFieldClass.CountryCodes[0]?.dialCode || '';
+  }
+
   setActiveInputValue(val) {
     const sanitizedVal = sanitizeCountryCodePrefix(val);
     const isPhoneField = this.activeInput.localName === PHONE_FIELD;
-    const value = isPhoneField
-      ? `${this.phoneCountryCodeInput.countryCodeItems}-${sanitizedVal}`
-      : sanitizedVal;
-    this.activeInput.value = value;
+    if (isPhoneField) {
+      const dialCode = this.phoneCountryCodeInput.countryCodeItems || this.#getDefaultDialCode();
+      this.activeInput.value = `${dialCode}-${sanitizedVal}`;
+    } else {
+      this.activeInput.value = sanitizedVal;
+    }
   }
 
   toggleInputVisibility() {