@descope/web-components-ui 3.14.9 → 3.15.0

package/dist/index.esm.js

@@ -9383,6 +9383,13 @@ class PasscodeInternal extends BaseInputClass$d {
 
       const debouncedHandleParseInput = debounce(handleParseInput, 0, { trailing: true });
 
+      // Per-input flag: set in keydown, consumed in the input event.
+      // Fallback for WebKit/Safari, where the native input event can fire
+      // non-composed; proxyInputMixin then re-dispatches it as a plain Event
+      // (no inputType), so the 'deleteContentBackward' check misses the
+      // backspace and navigation is skipped.
+      let lastKeyWasBackspace = false;
+
       // sanitize the input
       input.addEventListener('input', (e) => {
         input.value = sanitizeStr(input.value);
@@ -9391,29 +9398,50 @@ class PasscodeInternal extends BaseInputClass$d {
           toggleMaskVisibility(input, input.value[0]);
         }
 
-        setTimeout(() => {
-          if (e?.inputType === 'deleteContentBackward') {
-            focusElement(this.getPrevInput(input));
-          }
-        });
+        // inputType covers iOS (unreliable keydown); the flag covers WebKit
+        // (missing inputType). See flag declaration above.
+        const isBackspace = e?.inputType === 'deleteContentBackward' || lastKeyWasBackspace;
+        lastKeyWasBackspace = false;
+
+        if (isBackspace) {
+          // Navigate synchronously (no setTimeout) to prevent WebKit key-event
+          // leakage: with setTimeout(0), WebKit can dispatch the next key-repeat
+          // backspace event to the newly focused element, deleting a second digit.
+          // Calling focusElement here (inside the input event, not keydown) is safe
+          // because the browser has already finished processing the deletion.
+          focusElement(this.getPrevInput(input));
+        }
+
         debouncedHandleParseInput(input.value);
       });
 
       // we want backspace to focus on the previous digit
-      input.onkeydown = ({ key }) => {
-        // when user deletes a digit, we want to focus the previous digit
+      input.onkeydown = (e) => {
+        const { key } = e;
         if (key === 'Backspace') {
-          // if value is empty then the input element does not fire `input` event
-          // if this is the case, we focus the element here.
-          // otherwise, the focusElement occurs as part of the `input` event listener
           if (!input.value) {
-            setTimeout(() => focusElement(this.getPrevInput(input)), 0);
+            // Empty field: the input event will not fire (nothing to delete),
+            // so we must handle navigation here.
+            // e.preventDefault() stops WebKit from leaking this keypress to
+            // the element that receives focus (key-event leakage).
+            e.preventDefault();
+            lastKeyWasBackspace = false;
+            focusElement(this.getPrevInput(input));
           } else {
+            // Non-empty field: let the browser delete normally so the input
+            // event fires (needed on older iOS where keydown is unreliable).
+            // Move the caret to the end first so Backspace deletes the digit
+            // even if a direct tap left the caret before it (caret at index 0).
             input.setSelectionRange(1, 1);
+            // Fallback signal for the input handler (see flag declaration above).
+            lastKeyWasBackspace = true;
+          }
+        } else {
+          lastKeyWasBackspace = false;
+          if (key.length === 1) {
+            // we want only characters and not command keys
+            input.value = ''; // we are clearing the previous value so we can override it with the new value
           }
-        } else if (key.length === 1) {
-          // we want only characters and not command keys
-          input.value = ''; // we are clearing the previous value so we can override it with the new value
         }
       };
 
@@ -15658,6 +15686,10 @@ const customMixin$8 = (superclass) =>
       return this.getAttribute('opened') === 'true';
     }
 
+    get closeOnOutsideClick() {
+      return this.getAttribute('close-on-outside-click') === 'true';
+    }
+
     handleOpened() {
       if (this.opened) {
         this.style.display = '';
@@ -15723,6 +15755,28 @@ const customMixin$8 = (superclass) =>
       overlay._enterModalState = () => {};
 
       overlay.close = () => false;
+
+      // close the modal when the user clicks/taps the backdrop (outside the modal
+      // box). Vaadin's own outside-click does not fire here because we keep the
+      // overlay in the shadow DOM (see _attachOverlay above), which leaves it out
+      // of Vaadin's overlay stack, so we detect the backdrop click ourselves.
+      // the listener is always attached and reads `closeOnOutsideClick` at click
+      // time, so toggling the attribute after init is respected.
+      overlay.addEventListener('click', (event) => {
+        if (!this.closeOnOutsideClick || !this.opened) return;
+
+        // the visible modal box; clicks inside it (content + its padding) keep
+        // the modal open, only clicks on the dimmed backdrop close it. if we
+        // can't find the box, don't close - safer than closing on an inside click
+        const overlayPart = overlay.shadowRoot?.querySelector('[part="overlay"]');
+        if (!overlayPart || event.composedPath().includes(overlayPart)) {
+          return;
+        }
+
+        // just close ourselves; consumers that need to react (e.g. ModalDriver
+        // resetting the content) observe the `opened` attribute
+        this.removeAttribute('opened');
+      });
     }
   };