diff --git a/README.md b/README.md index 6931cd7..30bc5d0 100644 --- a/README.md +++ b/README.md @@ -145,6 +145,13 @@ const handlePaste: React.ClipboardEventHandler = (event) => { false Auto focuses input on initial page load. + + lastInputFocused + boolean + false + false + Auto focuses the last input element on initial page load. shouldAutoFocus has higher priority if two auto focus props are set. + skipDefaultStyles boolean diff --git a/src/index.tsx b/src/index.tsx index 3afd218..310429b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -37,6 +37,8 @@ interface OTPInputProps { renderInput: (inputProps: InputProps, index: number) => React.ReactNode; /** Whether the first input should be auto focused */ shouldAutoFocus?: boolean; + /** Whether the last input should be auto focused */ + lastInputFocused?: boolean; /** Placeholder for the inputs */ placeholder?: string; /** Function to render the separator */ @@ -60,6 +62,7 @@ const OTPInput = ({ onPaste, renderInput, shouldAutoFocus = false, + lastInputFocused = false, inputType = 'text', renderSeparator, placeholder, @@ -81,8 +84,10 @@ const OTPInput = ({ React.useEffect(() => { if (shouldAutoFocus) { inputRefs.current[0]?.focus(); + } else if (lastInputFocused) { + focusInput(numInputs - 1); } - }, [shouldAutoFocus]); + }, [shouldAutoFocus, lastInputFocused]); const getPlaceholderValue = () => { if (typeof placeholder === 'string') {