From 4a240d9522d41c947bf4c36583d48ab4ea752155 Mon Sep 17 00:00:00 2001 From: Batuhan Tomo Date: Mon, 6 May 2024 11:43:08 +0300 Subject: [PATCH 1/2] Fix #6573: add paste key --- components/lib/inputotp/InputOtp.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js index 16af969df4..06c51c7970 100644 --- a/components/lib/inputotp/InputOtp.js +++ b/components/lib/inputotp/InputOtp.js @@ -148,7 +148,10 @@ export const InputOtp = React.memo( default: { // Prevent non-numeric characters from being entered if integerOnly is true or if the length of the input is greater than the specified length - if ((props?.integerOnly && !((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.key) >= 0 && Number(event.key) <= 9)) || (tokens.join('').length >= props.length && event.code !== 'Delete')) { + if ( + (props?.integerOnly && !(event.code === 'KeyV' || ((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.key) >= 0 && Number(event.key) <= 9))) || + (tokens.join('').length >= props.length && event.code !== 'Delete') + ) { event.preventDefault(); } From db85a2944177e74705574161302fabd3a52ee3bd Mon Sep 17 00:00:00 2001 From: Melloware Date: Mon, 6 May 2024 10:06:33 -0400 Subject: [PATCH 2/2] Update InputOtp.js --- components/lib/inputotp/InputOtp.js | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js index 06c51c7970..9e0d8e3804 100644 --- a/components/lib/inputotp/InputOtp.js +++ b/components/lib/inputotp/InputOtp.js @@ -79,6 +79,10 @@ export const InputOtp = React.memo( }; const onInput = (event, index) => { + if (props.disabled || props.readOnly) { + return; + } + if (event.nativeEvent.inputType === 'insertFromPaste') { return; // handled in onPaste } @@ -93,6 +97,10 @@ export const InputOtp = React.memo( }; const onPaste = (event) => { + if (props.disabled || props.readOnly) { + return; + } + let paste = event.clipboardData.getData('text'); if (paste.length) { @@ -117,6 +125,15 @@ export const InputOtp = React.memo( }; const onKeydown = (event) => { + if (props.disabled || props.readOnly) { + return; + } + + // special keys should be ignored, if it is CTRL+V is handled in onPaste + if (event.altKey || event.ctrlKey || event.metaKey) { + return; + } + switch (event.code) { case 'ArrowLeft': { moveToPrevInput(event); @@ -148,10 +165,7 @@ export const InputOtp = React.memo( default: { // Prevent non-numeric characters from being entered if integerOnly is true or if the length of the input is greater than the specified length - if ( - (props?.integerOnly && !(event.code === 'KeyV' || ((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.key) >= 0 && Number(event.key) <= 9))) || - (tokens.join('').length >= props.length && event.code !== 'Delete') - ) { + if ((props?.integerOnly && !((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.key) >= 0 && Number(event.key) <= 9)) || (tokens.join('').length >= props.length && event.code !== 'Delete')) { event.preventDefault(); }