@descope/web-components-ui 1.0.339 → 1.0.341

package/dist/index.esm.js

@@ -1080,6 +1080,16 @@ const proxyInputMixin =
           }
         };
 
+        // We want to ensure that `input` events properly cross ShadowDOM boundries
+        // e.g. When we autofill a component's input with 1Password, for instance,
+        // the event is fired without `composed: true` and doesn't our component's
+        // ShadowDOM.
+        this.baseElement.addEventListener('input', (e) => {
+          if (!e.composed) {
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+          }
+        });
+
         triggerValidationEvents.forEach((e) => {
           this.baseElement?.addEventListener(e, () => {
             this.inputElement?.setCustomValidity('');
@@ -3443,18 +3453,26 @@ const componentName$D = getComponentName('password');
 
 const customMixin$7 = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
-    hidePasswordVisibility(input) {
-      // handle input element's type
-      input.setAttribute('type', 'password');
-      // handle vaadin's `password-visible` attribute
-      this.setAttribute('password-visible', 'false');
-    }
-
-    showPasswordVisibility(input) {
-      // handle input element's type
-      input.setAttribute('type', 'text');
-      // handle vaadin's `password-visible` attribute
-      this.setAttribute('password-visible', 'true');
+    init() {
+      super.init?.();
+
+      this.handleCaretOnVisibilityChange();
+    }
+
+    get caretPosition() {
+      return this.value?.length || 0;
+    }
+
+    handleCaretOnVisibilityChange() {
+      const origTogglePasswordVisibility = this.baseElement._togglePasswordVisibility.bind(
+        this.baseElement
+      );
+      this.baseElement._togglePasswordVisibility = () => {
+        setTimeout(() => {
+          origTogglePasswordVisibility();
+          this.inputElement.setSelectionRange(this.caretPosition, this.caretPosition);
+        });
+      };
     }
 
     getAutocompleteType() {