@descope/web-components-ui 1.0.339 → 1.0.341

Sign up to get free protection for your applications and to get access to all the features.
@@ -2301,6 +2301,16 @@ const proxyInputMixin =
2301
2301
  }
2302
2302
  };
2303
2303
 
2304
+ // We want to ensure that `input` events properly cross ShadowDOM boundries
2305
+ // e.g. When we autofill a component's input with 1Password, for instance,
2306
+ // the event is fired without `composed: true` and doesn't our component's
2307
+ // ShadowDOM.
2308
+ this.baseElement.addEventListener('input', (e) => {
2309
+ if (!e.composed) {
2310
+ this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
2311
+ }
2312
+ });
2313
+
2304
2314
  triggerValidationEvents.forEach((e) => {
2305
2315
  this.baseElement?.addEventListener(e, () => {
2306
2316
  this.inputElement?.setCustomValidity('');
@@ -3531,18 +3541,26 @@ const componentName$O = getComponentName('password');
3531
3541
 
3532
3542
  const customMixin$9 = (superclass) =>
3533
3543
  class PasswordFieldMixinClass extends superclass {
3534
- hidePasswordVisibility(input) {
3535
- // handle input element's type
3536
- input.setAttribute('type', 'password');
3537
- // handle vaadin's `password-visible` attribute
3538
- this.setAttribute('password-visible', 'false');
3539
- }
3540
-
3541
- showPasswordVisibility(input) {
3542
- // handle input element's type
3543
- input.setAttribute('type', 'text');
3544
- // handle vaadin's `password-visible` attribute
3545
- this.setAttribute('password-visible', 'true');
3544
+ init() {
3545
+ super.init?.();
3546
+
3547
+ this.handleCaretOnVisibilityChange();
3548
+ }
3549
+
3550
+ get caretPosition() {
3551
+ return this.value?.length || 0;
3552
+ }
3553
+
3554
+ handleCaretOnVisibilityChange() {
3555
+ const origTogglePasswordVisibility = this.baseElement._togglePasswordVisibility.bind(
3556
+ this.baseElement
3557
+ );
3558
+ this.baseElement._togglePasswordVisibility = () => {
3559
+ setTimeout(() => {
3560
+ origTogglePasswordVisibility();
3561
+ this.inputElement.setSelectionRange(this.caretPosition, this.caretPosition);
3562
+ });
3563
+ };
3546
3564
  }
3547
3565
 
3548
3566
  getAutocompleteType() {