diff --git a/packages/primeng/src/inputotp/inputotp.ts b/packages/primeng/src/inputotp/inputotp.ts index 1e588e2ca4b..e1aaf37f274 100644 --- 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" [size]="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); }