@descope/web-components-ui 1.0.159 → 1.0.161

package/dist/cjs/index.cjs.js

@@ -1241,12 +1241,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;
     }
@@ -1273,49 +1275,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(
@@ -3998,18 +4005,17 @@ const ComboBoxMixin = (superclass) =>
     // so we override it to open inside the shadow DOM
     #overrideOverlaySettings() {
       const overlay = this.baseElement.shadowRoot.querySelector('vaadin-combo-box-overlay');
-
       overlay._attachOverlay = () => {
-        this.bringToFront();
+        overlay.bringToFront();
       };
-      overlay._detachOverlay = () => {};
-      overlay._enterModalState = () => {};
+      overlay._detachOverlay = () => { };
+      overlay._enterModalState = () => { };
     }
 
     init() {
       super.init?.();
 
-      this.#overrideOverlaySettings.bind(this);
+      this.#overrideOverlaySettings();
       observeChildren(this, this.#onChildrenChange.bind(this));
     }
   };