feat: add focus container styles to last input

adds the focus container styles to the last input when the otp is filled and focused
anday013 · May 3, 2024 · 9f6b8ed · 9f6b8ed
1 parent 4da4c01
commit 9f6b8ed
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/src/OtpInput/OtpInput.tsx b/src/OtpInput/OtpInput.tsx
@@ -7,7 +7,7 @@ import { useOtpInput } from "./useOtpInput";
 
 export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
   const {
-    models: { text, inputRef, focusedInputIndex, hasCursor },
+    models: { text, inputRef, focusedInputIndex, isFocused },
     actions: { clear, handlePress, handleTextChange, focus, handleFocus, handleBlur },
     forms: { setTextWithRef },
   } = useOtpInput(props);
@@ -35,13 +35,13 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
 
   useImperativeHandle(ref, () => ({ clear, focus, setValue: setTextWithRef }));
 
-  const generatePinCodeContainerStyle = (isFocusedInput: boolean, char: string) => {
+  const generatePinCodeContainerStyle = (isFocusedContainer: boolean, char: string) => {
     const stylesArray = [styles.codeContainer, pinCodeContainerStyle];
-    if (focusColor && isFocusedInput) {
+    if (focusColor && isFocusedContainer) {
       stylesArray.push({ borderColor: focusColor });
     }
 
-    if (focusedPinCodeContainerStyle && isFocusedInput) {
+    if (focusedPinCodeContainerStyle && isFocusedContainer) {
       stylesArray.push(focusedPinCodeContainerStyle);
     }
 
@@ -63,14 +63,16 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
           .fill(0)
           .map((_, index) => {
             const char = text[index];
-            const isFocusedInput = index === focusedInputIndex && !disabled && Boolean(hasCursor);
+            const isFocusedInput = index === focusedInputIndex && !disabled && Boolean(isFocused);
+            const isFilledLastInput = text.length === numberOfDigits && index === text.length - 1;
+            const isFocusedContainer = isFocusedInput || (isFilledLastInput && Boolean(isFocused))
 
             return (
               <Pressable
                 key={`${char}-${index}`}
                 disabled={disabled}
                 onPress={handlePress}
-                style={generatePinCodeContainerStyle(isFocusedInput, char)}
+                style={generatePinCodeContainerStyle(isFocusedContainer, char)}
                 testID="otp-input"
               >
                 {isFocusedInput && !hideStick ? (

diff --git a/src/OtpInput/useOtpInput.ts b/src/OtpInput/useOtpInput.ts
@@ -10,7 +10,7 @@ export const useOtpInput = ({
   autoFocus = true,
 }: OtpInputProps) => {
   const [text, setText] = useState("");
-  const [hasCursor, setHasCursor] = useState(autoFocus);
+  const [isFocused, setIsFocused] = useState(autoFocus);
   const inputRef = useRef<TextInput>(null);
   const focusedInputIndex = text.length;
 
@@ -45,15 +45,15 @@ export const useOtpInput = ({
   };
 
   const handleFocus = () => {
-    setHasCursor(true);
+    setIsFocused(true);
   };
 
   const handleBlur = () => {
-    setHasCursor(false);
+    setIsFocused(false);
   };
 
   return {
-    models: { text, inputRef, focusedInputIndex, hasCursor },
+    models: { text, inputRef, focusedInputIndex, isFocused },
     actions: { handlePress, handleTextChange, clear, focus, handleFocus, handleBlur },
     forms: { setText, setTextWithRef },
   };