@descope/web-components-ui 3.13.1 → 3.13.3

package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -135,6 +135,14 @@ class PhoneFieldInternal extends BaseInputClass {
   }
 
   set value(val) {
+    this.#onValueChange(val);
+  }
+
+  // Handles programmatic value changes only (e.g. `component.value = '...'`).
+  // User edits of the inner inputs are handled by #onTextFieldChange /
+  // #onComboBoxChange — Vaadin's value write-back is disabled in PhoneFieldClass
+  // so it no longer routes inner edits through this setter.
+  #onValueChange(val) {
     // reject empty or digit-free values
     if (!val || !/\d/.test(val)) {
       this.#clearValue();
@@ -267,22 +275,37 @@ class PhoneFieldInternal extends BaseInputClass {
   }
 
   #initInputs() {
-    // Sanitize phone input value to filter everything but digits
-    this.textField.addEventListener('input', (e) => {
-      if (!this.allowAlphanumericInput) {
-        const telDigitsRegExp = /^\d$/;
-        const sanitizedInput = e.target.value
-          .split('')
-          .filter((char) => telDigitsRegExp.test(char))
-          .join('');
-        e.target.value = sanitizedInput;
-      }
-    });
+    // Handle each inner input on its own: the phone field updates the national
+    // number, the combo box updates the country/dial code. Neither rewrites the
+    // other, so editing one input never clears the other.
+    this.textField.addEventListener('input', this.#onTextFieldChange.bind(this));
+    this.comboBox.addEventListener('change', this.#onComboBoxChange.bind(this));
 
     this.handleFocusEventsDispatching(this.inputs);
     this.handleInputEventDispatching();
   }
 
+  // user edited the phone number: sanitize and (optionally) format it, leaving
+  // the country code untouched
+  #onTextFieldChange() {
+    const sanitized = this.allowAlphanumericInput
+      ? this.textField.value
+      : this.textField.value.replace(/\D+/g, '');
+
+    this.textField.value = this.isFormatValue ? this.#formatNationalNumber(sanitized) : sanitized;
+  }
+
+  // user changed the country: re-format the existing national number for the
+  // new country, leaving the phone number digits untouched
+  #onComboBoxChange() {
+    if (!this.isFormatValue) {
+      return;
+    }
+
+    const nationalNumber = this.textField.value.replace(/\D+/g, '');
+    this.textField.value = this.#formatNationalNumber(nationalNumber);
+  }
+
   #formatNationalNumber(nationalNumber = '') {
     // re-initialize AsYouType if country code is outdated
     if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {