@descope/web-components-ui 3.13.2 → 3.13.3

package/dist/index.esm.js

@@ -11463,6 +11463,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$c {
   }
 
   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();
@@ -11595,22 +11603,37 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$c {
   }
 
   #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) {
@@ -11737,6 +11760,12 @@ const customMixin$b = (superclass) =>
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
+      // On every input, Vaadin writes its value back into the input element,
+      // which re-runs the internal `value` setter and overwrites the combo box
+      // and phone fields. PhoneFieldInternal manages those inputs itself, so
+      // disable Vaadin's write-back.
+      this.baseElement._forwardInputValue = () => {};
+
       this.inputElement = this.shadowRoot.querySelector(componentName$14);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {