@descope/web-components-ui 1.0.159 → 1.0.160

package/dist/index.esm.js

@@ -919,12 +919,14 @@ const proxyInputMixin = (superclass) =>
     }
 
     get inputElement() {
+      if (this.#inputElement) return this.#inputElement
+
       this.warnIfInputElementIsMissing();
 
       const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
       const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
 
-      this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
+      this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
 
       return this.#inputElement;
     }
@@ -951,49 +953,54 @@ const proxyInputMixin = (superclass) =>
     init() {
       super.init?.();
 
-      this.inputElement.addEventListener('input', (e) => {
-        if (!this.inputElement.checkValidity()) {
-          this.inputElement.setCustomValidity('');
-          // after updating the input validity we want to trigger set validity on the wrapping element
-          // so we will get the updated validity
-          this.setCustomValidity('');
-
-          // Vaadin is getting the input event before us,
-          // so in order to make sure they use the updated validity
-          // we calling their fn after updating the input validity
-          this.baseElement.__onInput(e);
+      // on some cases the base element is not ready so the inputElement is empty
+      // we are deferring this section to make sure the base element is ready
+      setTimeout(() => {
+        this.inputElement.addEventListener('input', (e) => {
+          if (!this.inputElement.checkValidity()) {
+            this.inputElement.setCustomValidity('');
+            // after updating the input validity we want to trigger set validity on the wrapping element
+            // so we will get the updated validity
+            this.setCustomValidity('');
+
+            // Vaadin is getting the input event before us,
+            // so in order to make sure they use the updated validity
+            // we calling their fn after updating the input validity
+            this.baseElement.__onInput(e);
+
+            this.#handleErrorMessage();
+          }
+        });
 
-          this.#handleErrorMessage();
-        }
-      });
+        this.baseElement.addEventListener('change', () => {
+          this.#dispatchChange();
+        });
 
-      this.baseElement.addEventListener('change', () => {
-        this.#dispatchChange();
-      });
+        this.#inputElement.addEventListener('blur', () => {
+          if (!this.checkValidity()) {
+            this.setAttribute('invalid', 'true');
+            this.#handleErrorMessage();
+          }
+        });
 
-      this.#inputElement.addEventListener('blur', () => {
-        if (!this.checkValidity()) {
-          this.setAttribute('invalid', 'true');
+        this.addEventListener('invalid', () => {
+          if (!this.checkValidity()) {
+            this.setAttribute('invalid', 'true');
+          }
           this.#handleErrorMessage();
-        }
-      });
-
-      this.addEventListener('invalid', () => {
-        if (!this.checkValidity()) {
-          this.setAttribute('invalid', 'true');
-        }
-        this.#handleErrorMessage();
-      });
+        });
 
-      this.handleInternalInputErrorMessage();
+        this.handleInternalInputErrorMessage();
 
-      // sync properties
-      propertyObserver(this, this.inputElement, 'value');
-      propertyObserver(this, this.inputElement, 'selectionStart');
-      this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
+        // sync properties
+        propertyObserver(this, this.inputElement, 'value');
+        propertyObserver(this, this.inputElement, 'selectionStart');
+        this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
 
-      forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
+        forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
+      });
     }
+
   };
 
 const composedProxyInputMixin = compose(
@@ -4582,7 +4589,7 @@ class PhoneFieldInternal extends BaseInputClass$2 {
     const hasPhone = this.phoneNumberInput.value;
     const emptyValue = !hasCode || !hasPhone;
     const hasMinPhoneLength =
-      this.phoneNumberInput.value.length && this.phoneNumberInput.value.length < this.minLength;
+      this.phoneNumberInput.value?.length && this.phoneNumberInput.value.length < this.minLength;
 
     if (this.isRequired && emptyValue) {
       return { valueMissing: true };