@descope/web-components-ui 1.0.320 → 1.0.321

package/dist/index.esm.js

@@ -3413,6 +3413,8 @@ const customMixin$7 = (superclass) =>
       // create external input
       const externalInput = createExternalInputEle('external-input', this.getAutocompleteType());
 
+      this.handlePasswordVisibility(externalInput);
+
       // apply original input's styles to external input
       setTimeout(() => {
         applyExternalInputStyles(origInput, externalInput);
@@ -3423,6 +3425,7 @@ const customMixin$7 = (superclass) =>
 
       // sync input stateful attributes: `type` (for visibility state change) and `readonly`
       syncAttrs(origInput, externalInput, { includeAttrs: ['type', 'readonly'] });
+      syncAttrs(this, externalInput, { includeAttrs: ['focused'] });
 
       origInput.addEventListener('focus', (e) => {
         e.preventDefault();
@@ -3440,6 +3443,59 @@ const customMixin$7 = (superclass) =>
       this.appendChild(externalInput);
     }
 
+    // override vaadin's password visibility toggle.
+    // we need this override in order to to resolve the external input `focus` race condition,
+    // which is caused due to the focus sync between the two inputs.
+    handlePasswordVisibility(externalInput) {
+      // disable vaadin's `__boundRevealButtonMouseDown` mouse-down event lisetener
+      const origBoundRevealButtonMouseDown = this.baseElement.__boundRevealButtonMouseDown;
+      this.baseElement
+        .querySelector('vaadin-password-field-button')
+        .removeEventListener('mousedown', origBoundRevealButtonMouseDown);
+
+      // disable vaadin's `_passwordVisibleChanged` observer
+      this.baseElement._passwordVisibleChanged = () => {};
+
+      // override vaadin's `_togglePasswordVisibility`
+      this.baseElement._togglePasswordVisibility = () => {
+        const currVisibility = externalInput.getAttribute('type');
+        if (currVisibility === 'password') {
+          this.showPasswordVisibility(externalInput);
+        } else {
+          this.hidePasswordVisibility(externalInput);
+        }
+      };
+
+      // on component blur, if password is revealed - hide it
+      // this behaves differently from vaadin's focus handling, and checks if the blur takes the component out of focus
+      // (which menas the click was made outside the component) or if the blur was called due to clicking the Reveal Button
+      // and then focusing in the input again
+      this.addEventListener('blur', () => {
+        setTimeout(() => {
+          const isHiddenAndFocused =
+            externalInput.getAttribute('type') !== 'password' &&
+            externalInput.getAttribute('focused') !== 'true';
+          if (isHiddenAndFocused) {
+            this.hidePasswordVisibility(externalInput);
+          }
+        });
+      });
+    }
+
+    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');
+    }
+
     getAutocompleteType() {
       return this.getAttribute('autocomplete') || 'current-password';
     }