From eab29d7463cc3b1e58859d57971616f9fae903a1 Mon Sep 17 00:00:00 2001 From: Aman Rawat Date: Sun, 7 May 2023 00:41:25 +0530 Subject: [PATCH 1/4] add: new boolean type prop to consider or not consider spaces as valid characters in OTP input --- example/src/App.tsx | 1 + src/index.tsx | 9 ++++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index 9fd11d72..77d30290 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -116,6 +116,7 @@ function App() { inputType={inputType} renderInput={(props) => } shouldAutoFocus + shouldRemoveWhiteSpaceOnPaste />
diff --git a/src/index.tsx b/src/index.tsx index de05ad68..4645f4e9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -44,6 +44,8 @@ interface OTPInputProps { inputStyle?: React.CSSProperties | string; /** The type that will be passed to the input being rendered */ inputType?: AllowedInputTypes; + /** Boolean to consider spaces as valid OTP values */ + shouldRemoveWhiteSpaceOnPaste?: boolean; } const isStyleObject = (obj: unknown) => typeof obj === 'object' && obj !== null; @@ -59,6 +61,7 @@ const OTPInput = ({ placeholder, containerStyle, inputStyle, + shouldRemoveWhiteSpaceOnPaste = false, }: OTPInputProps) => { const [activeInput, setActiveInput] = React.useState(0); const inputRefs = React.useRef>([]); @@ -184,11 +187,15 @@ const OTPInput = ({ let nextActiveInput = activeInput; // Get pastedData in an array of max size (num of inputs - current position) - const pastedData = event.clipboardData + let pastedData = event.clipboardData .getData('text/plain') .slice(0, numInputs - activeInput) .split(''); + if(shouldRemoveWhiteSpaceOnPaste) { + pastedData = pastedData.filter((character) => character !== ' '); + } + // Prevent pasting if the clipboard data contains non-numeric values for number inputs if (isInputNum && pastedData.some((value) => isNaN(Number(value)))) { return; From 3baca6b578aebc846c7cefb11d3d2a3ee6f41bc5 Mon Sep 17 00:00:00 2001 From: Aman Rawat Date: Tue, 16 May 2023 21:40:29 +0530 Subject: [PATCH 2/4] fix: skipping pasted numbers if there is a white space in between --- src/index.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 4645f4e9..6fa95d60 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -186,16 +186,17 @@ const OTPInput = ({ const otp = getOTPValue(); let nextActiveInput = activeInput; + let pastedString = event.clipboardData.getData('text/plain'); + + if (shouldRemoveWhiteSpaceOnPaste) { + pastedString = pastedString.replace(/\s/g, ''); + } + // Get pastedData in an array of max size (num of inputs - current position) - let pastedData = event.clipboardData - .getData('text/plain') + const pastedData = pastedString .slice(0, numInputs - activeInput) .split(''); - if(shouldRemoveWhiteSpaceOnPaste) { - pastedData = pastedData.filter((character) => character !== ' '); - } - // Prevent pasting if the clipboard data contains non-numeric values for number inputs if (isInputNum && pastedData.some((value) => isNaN(Number(value)))) { return; From 2b5d233a744955a56c2ec56e6f3bf70ac4b51d46 Mon Sep 17 00:00:00 2001 From: Aman Rawat Date: Thu, 27 Jul 2023 01:04:17 +0530 Subject: [PATCH 3/4] chore: updated comment for OTPInputProps --- src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index 6fa95d60..4f6151ac 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -44,7 +44,7 @@ interface OTPInputProps { inputStyle?: React.CSSProperties | string; /** The type that will be passed to the input being rendered */ inputType?: AllowedInputTypes; - /** Boolean to consider spaces as valid OTP values */ + /** Boolean to not consider spaces as valid OTP values */ shouldRemoveWhiteSpaceOnPaste?: boolean; } From 2f5a514eb2c8b7c149e25199bdcf9ee09dfed0c0 Mon Sep 17 00:00:00 2001 From: Aman Rawat Date: Thu, 27 Jul 2023 01:23:24 +0530 Subject: [PATCH 4/4] add: updates to readme for new shouldRemoveWhiteSpaceOnPaste prop --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 45363380..68949e78 100644 --- a/README.md +++ b/README.md @@ -129,6 +129,13 @@ export default function App() { false Auto focuses input on initial page load. + + shouldRemoveWhiteSpaceOnPaste + boolean + false + false + Removes white spaces from pasted OTP characters. + ### ⚠️ Warning @@ -152,6 +159,8 @@ The v3 of `react-otp-input` is a complete rewrite of the library. Apart from mak - A new prop called `inputType` has been added to the component. This prop can be used to specify the type of the input that will be passed to the input element being rendered. The default value of this prop is `number`. +- An new prop called `shouldRemoveWhiteSpaceOnPaste` has been added to the component. This prop can be used to disallow spaces as valid OTP characters. This is default set to `false`. + ## Migrating from v1 `react-otp-input` is now a controlled component to facilitate functionalities that weren't possible before from the application using it, such as clearing or pre-assigning values. For `v1.0.0` and above, a `value` prop needs to be passed in the component for it to function as expected.