fix: handle otp keyboard filling

Fixes #16373
primefaces · Dec 7, 2024 · 79c1b46 · 79c1b46
1 parent dfeae96
commit 79c1b46
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/packages/primeng/src/inputotp/inputotp.ts b/packages/primeng/src/inputotp/inputotp.ts
@@ -69,7 +69,7 @@ export interface InputOtpInputTemplateContext {
                     type="text"
                     pInputText
                     [value]="getModelValue(i)"
-                    [maxLength]="1"
+                    [maxLength]="i === 1 ? length : 1"
                     [type]="inputType"
                     class="p-inputotp-input"
                     [pSize]="size"
@@ -213,7 +213,13 @@ export class InputOtp extends BaseComponent implements AfterContentInit {
     }
 
     onInput(event, index) {
-        this.tokens[index] = event.target.value;
+        const value = event.target.value;
+        if (index === 0 && value.length > 1) {
+            this.handleOnPaste(value, event);
+            event.stopPropagation();
+            return;
+        }
+        this.tokens[index] = value;
         this.updateModel(event);
 
         if (event.inputType === 'deleteContentBackward') {
@@ -367,18 +373,22 @@ export class InputOtp extends BaseComponent implements AfterContentInit {
             let paste = event.clipboardData.getData('text');
 
             if (paste.length) {
-                let pastedCode = paste.substring(0, this.length + 1);
-
-                if (!this.integerOnly || !isNaN(pastedCode)) {
-                    this.tokens = pastedCode.split('');
-                    this.updateModel(event);
-                }
+                this.handleOnPaste(paste, event);
             }
 
             event.preventDefault();
         }
     }
 
+    handleOnPaste(paste, event) {
+        let pastedCode = paste.substring(0, this.length + 1);
+
+        if (!this.integerOnly || !isNaN(pastedCode)) {
+            this.tokens = pastedCode.split('');
+            this.updateModel(event);
+        }
+    }
+
     getRange(n: number): number[] {
         return Array.from({ length: n }, (_, index) => index + 1);
     }