@descope/web-components-ui 1.0.156 → 1.0.158

package/dist/index.esm.js

@@ -2419,10 +2419,6 @@ class PasscodeInternal extends BaseInputClass$3 {
     }
   }
 
-  get pattern() {
-    return `^$|^\\d{${this.digits},}$`;
-  }
-
   getValidity() {
     if (this.isRequired && !this.value) {
       return { valueMissing: true };
@@ -2476,29 +2472,50 @@ class PasscodeInternal extends BaseInputClass$3 {
     focusElement(currentInput);
   }
 
+  parseInputValue(input) {
+    const charArr = getSanitizedCharacters(input.value);
+
+    if (!charArr.length) {
+      // if we got an invalid value we want to clear the input
+      input.value = '';
+    } else this.fillDigits(charArr, input);
+  }
+
   initInputs() {
+    let currentInput;
+
     this.inputs.forEach((input) => {
+      input.addEventListener('change', (e) => {
+        if (currentInput !== e.target) {
+          this.parseInputValue(input);
+        }
+      });
+
       // sanitize the input
-      input.addEventListener('input', (_) => {
-        const charArr = getSanitizedCharacters(input.value);
+      input.addEventListener('input', (e) => {
+        // when using iPhone's code autofill we get only `change` events.
+        // In other scenarios we get `input` AND `change` events.
+        // In order to be parse the digits properly in iPhone, we need to listen to `change` event
+        // and validate it was not preceeded by an `input` event.
+        // To do so, we're keeping a reference to the input element in `input` events,
+        // and only if there the reference is null, then we're assuming no `input` event was preceeding,
+        // and we're parsing the digits.
+        currentInput = e.target;
+        setTimeout(() => {
+          currentInput = null;
+          if (e.inputType === 'deleteContentBackward') {
+            focusElement(this.getPrevInput(input));
+          }
+        });
 
-        if (!charArr.length) {
-          // if we got an invalid value we want to clear the input
-          input.value = '';
-        } else this.fillDigits(charArr, input);
+        this.parseInputValue(input);
       });
 
       // we want backspace to focus on the previous digit
       input.onkeydown = ({ key }) => {
         // when user deletes a digit, we want to focus the previous digit
         if (key === 'Backspace') {
-          // if the cursor is at 0, we want to move it to 1, so the value will be deleted
-          if (!input.selectionStart) {
-            input.setSelectionRange(1, 1);
-          }
-          setTimeout(() => {
-            focusElement(this.getPrevInput(input));
-          });
+          input.setSelectionRange(1, 1);
         } 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
@@ -2524,6 +2541,10 @@ class PasscodeInternal extends BaseInputClass$3 {
       }
     }
   }
+
+  get pattern() {
+    return `^$|^\\d{${this.digits},}$`;
+  }
 }
 
 const componentName$b = getComponentName('text-field');