Merge pull request #28 from GoldAndLink/feature/add-focus-and-autofocus

Feature/add focus and autofocus
anday013 · Dec 15, 2023 · ce14be1 · ce14be1
2 parents e467112 + 195831f
commit ce14be1
Show file tree

Hide file tree

Showing 13 changed files with 79 additions and 9 deletions.
diff --git a/README.MD b/README.MD
@@ -71,6 +71,7 @@ The `react-native-otp-entry` component accepts the following props:
 | Prop                         | Type                   | Description                                                                                                    |
 | ---------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------- |
 | `numberOfDigits`             | number                 | The number of digits to be displayed in the OTP entry.                                                         |
+| `autoFocus`                  | boolean                | Set autofocus.                                                                                                 |
 | `focusColor`                 | ColorValue             | The color of the input field border and stick when it is focused.                                              |
 | `onTextChange`               | (text: string) => void | A callback function is invoked when the OTP text changes. It receives the updated text as an argument.         |
 | `onFilled`                   | (text: string) => void | A callback function is invoked when the OTP input is fully filled. It receives a full otp code as an argument. |
@@ -96,6 +97,7 @@ The `react-native-otp-entry` component exposes these functions with `ref`:
 | Prop       | Type                     | Description                        |
 | ---------- | ------------------------ | ---------------------------------- |
 | `clear`    | () => void;              | Clears the value of the OTP input. |
+| `focus`    | () => void;              | Focus of the OTP input. |
 | `setValue` | (value: string) => void; | Sets the value of the OTP input.   |
 
 ## License

diff --git a/dist/src/OtpInput/OtpInput.js b/dist/src/OtpInput/OtpInput.js
@@ -7,10 +7,10 @@ const OtpInput_styles_1 = require("./OtpInput.styles");
 const VerticalStick_1 = require("./VerticalStick");
 const useOtpInput_1 = require("./useOtpInput");
 exports.OtpInput = (0, react_1.forwardRef)((props, ref) => {
-    const { models: { text, inputRef, focusedInputIndex }, actions: { clear, handlePress, handleTextChange }, forms: { setTextWithRef }, } = (0, useOtpInput_1.useOtpInput)(props);
-    const { numberOfDigits, hideStick, focusColor = "#A4D0A4", focusStickBlinkingDuration, secureTextEntry = false, theme = {}, } = props;
+    const { models: { text, inputRef, focusedInputIndex }, actions: { clear, handlePress, handleTextChange, focus }, forms: { setTextWithRef }, } = (0, useOtpInput_1.useOtpInput)(props);
+    const { numberOfDigits, autoFocus = true, hideStick, focusColor = "#A4D0A4", focusStickBlinkingDuration, secureTextEntry = false, theme = {}, } = props;
     const { containerStyle, inputsContainerStyle, pinCodeContainerStyle, pinCodeTextStyle, focusStickStyle, focusedPinCodeContainerStyle, } = theme;
-    (0, react_1.useImperativeHandle)(ref, () => ({ clear, setValue: setTextWithRef }));
+    (0, react_1.useImperativeHandle)(ref, () => ({ clear, focus, setValue: setTextWithRef }));
     return (<react_native_1.View style={[OtpInput_styles_1.styles.container, containerStyle]}>
       <react_native_1.View style={[OtpInput_styles_1.styles.inputsContainer, inputsContainerStyle]}>
         {Array(numberOfDigits)
@@ -32,6 +32,6 @@ exports.OtpInput = (0, react_1.forwardRef)((props, ref) => {
               </react_native_1.Pressable>);
         })}
       </react_native_1.View>
-      <react_native_1.TextInput value={text} onChangeText={handleTextChange} maxLength={numberOfDigits} inputMode="numeric" ref={inputRef} autoFocus style={OtpInput_styles_1.styles.hiddenInput} secureTextEntry={secureTextEntry} testID="otp-input-hidden"/>
+      <react_native_1.TextInput value={text} onChangeText={handleTextChange} maxLength={numberOfDigits} inputMode="numeric" ref={inputRef} autoFocus={autoFocus} style={OtpInput_styles_1.styles.hiddenInput} secureTextEntry={secureTextEntry} testID="otp-input-hidden"/>
     </react_native_1.View>);
 });
diff --git a/dist/src/OtpInput/OtpInput.test.js b/dist/src/OtpInput/OtpInput.test.js
@@ -24,6 +24,16 @@ describe("OtpInput", () => {
                 expect(input).toHaveTextContent("•");
             });
         });
+        test("should autoFocused by default", () => {
+            renderOtpInput();
+            const input = react_native_1.screen.getByTestId("otp-input-hidden");
+            expect(input.props.autoFocus).toBe(true);
+        });
+        test('should not focus if "autoFocus" is false', () => {
+            renderOtpInput({ autoFocus: false });
+            const input = react_native_1.screen.getByTestId("otp-input-hidden");
+            expect(input.props.autoFocus).toBe(false);
+        });
         test("focusColor should not be overridden by theme", () => {
             renderOtpInput({
                 focusColor: "#000",

diff --git a/dist/src/OtpInput/OtpInput.types.d.ts b/dist/src/OtpInput/OtpInput.types.d.ts
@@ -1,6 +1,7 @@
 import { ColorValue, TextStyle, ViewStyle } from "react-native";
 export interface OtpInputProps {
     numberOfDigits: number;
+    autoFocus?: boolean;
     focusColor?: ColorValue;
     onTextChange?: (text: string) => void;
     onFilled?: (text: string) => void;
@@ -11,6 +12,7 @@ export interface OtpInputProps {
 }
 export interface OtpInputRef {
     clear: () => void;
+    focus: () => void;
     setValue: (value: string) => void;
 }
 export interface Theme {

diff --git a/dist/src/OtpInput/useOtpInput.d.ts b/dist/src/OtpInput/useOtpInput.d.ts
@@ -11,6 +11,7 @@ export declare const useOtpInput: ({ onTextChange, onFilled, numberOfDigits }: O
         handlePress: () => void;
         handleTextChange: (value: string) => void;
         clear: () => void;
+        focus: () => void;
     };
     forms: {
         setText: import("react").Dispatch<import("react").SetStateAction<string>>;

diff --git a/dist/src/OtpInput/useOtpInput.js b/dist/src/OtpInput/useOtpInput.js
@@ -28,9 +28,12 @@ const useOtpInput = ({ onTextChange, onFilled, numberOfDigits }) => {
     const clear = () => {
         setText("");
     };
+    const focus = () => {
+        inputRef.current?.focus();
+    };
     return {
         models: { text, inputRef, focusedInputIndex },
-        actions: { handlePress, handleTextChange, clear },
+        actions: { handlePress, handleTextChange, clear, focus },
         forms: { setText, setTextWithRef },
     };
 };

diff --git a/dist/src/OtpInput/useOtpInput.test.js b/dist/src/OtpInput/useOtpInput.test.js
@@ -23,6 +23,14 @@ describe("useOtpInput", () => {
             expect(result.current.forms.setText).toHaveBeenCalledWith("");
         });
     });
+    test("focus() should focus on input", () => {
+        jest.spyOn(React, "useRef").mockReturnValue({ current: { focus: jest.fn() } });
+        const { result } = renderUseOtInput();
+        result.current.actions.focus();
+        (0, react_native_1.act)(() => {
+            expect(result.current.models.inputRef.current?.focus).toHaveBeenCalled();
+        });
+    });
     test("setTextWithRef() should only call setText the first 'numberOfDigits' characters", () => {
         jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]);
         const { result } = renderUseOtInput();

diff --git a/src/OtpInput/OtpInput.test.tsx b/src/OtpInput/OtpInput.test.tsx
@@ -34,6 +34,22 @@ describe("OtpInput", () => {
       });
     });
 
+    test("should autoFocused by default", () => {
+      renderOtpInput();
+
+      const input = screen.getByTestId("otp-input-hidden");
+
+      expect(input.props.autoFocus).toBe(true);
+    });
+
+    test('should not focus if "autoFocus" is false', () => {
+      renderOtpInput({ autoFocus: false });
+
+      const input = screen.getByTestId("otp-input-hidden");
+
+      expect(input.props.autoFocus).toBe(false);
+    });
+
     test("focusColor should not be overridden by theme", () => {
       renderOtpInput({
         focusColor: "#000",

diff --git a/src/OtpInput/OtpInput.tsx b/src/OtpInput/OtpInput.tsx
@@ -8,11 +8,12 @@ import { useOtpInput } from "./useOtpInput";
 export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
   const {
     models: { text, inputRef, focusedInputIndex },
-    actions: { clear, handlePress, handleTextChange },
+    actions: { clear, handlePress, handleTextChange, focus },
     forms: { setTextWithRef },
   } = useOtpInput(props);
   const {
     numberOfDigits,
+    autoFocus = true,
     hideStick,
     focusColor = "#A4D0A4",
     focusStickBlinkingDuration,
@@ -28,7 +29,7 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
     focusedPinCodeContainerStyle,
   } = theme;
 
-  useImperativeHandle(ref, () => ({ clear, setValue: setTextWithRef }));
+  useImperativeHandle(ref, () => ({ clear, focus, setValue: setTextWithRef }));
 
   return (
     <View style={[styles.container, containerStyle]}>
@@ -74,7 +75,7 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
         maxLength={numberOfDigits}
         inputMode="numeric"
         ref={inputRef}
-        autoFocus
+        autoFocus={autoFocus}
         style={styles.hiddenInput}
         secureTextEntry={secureTextEntry}
         testID="otp-input-hidden"

diff --git a/src/OtpInput/OtpInput.types.ts b/src/OtpInput/OtpInput.types.ts
@@ -2,6 +2,7 @@ import { ColorValue, TextStyle, ViewStyle } from "react-native";
 
 export interface OtpInputProps {
   numberOfDigits: number;
+  autoFocus?: boolean;
   focusColor?: ColorValue;
   onTextChange?: (text: string) => void;
   onFilled?: (text: string) => void;
@@ -13,6 +14,7 @@ export interface OtpInputProps {
 
 export interface OtpInputRef {
   clear: () => void;
+  focus: () => void;
   setValue: (value: string) => void;
 }
 

diff --git a/src/OtpInput/useOtpInput.test.ts b/src/OtpInput/useOtpInput.test.ts
@@ -36,6 +36,17 @@ describe("useOtpInput", () => {
     });
   });
 
+  test("focus() should focus on input", () => {
+    jest.spyOn(React, "useRef").mockReturnValue({ current: { focus: jest.fn() } } as any);
+
+    const { result } = renderUseOtInput();
+    result.current.actions.focus();
+
+    act(() => {
+      expect(result.current.models.inputRef.current?.focus).toHaveBeenCalled();
+    });
+  });
+
   test("setTextWithRef() should only call setText the first 'numberOfDigits' characters", () => {
     jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]);
     const { result } = renderUseOtInput();

diff --git a/src/OtpInput/useOtpInput.ts b/src/OtpInput/useOtpInput.ts
@@ -32,9 +32,13 @@ export const useOtpInput = ({ onTextChange, onFilled, numberOfDigits }: OtpInput
     setText("");
   };
 
+  const focus = () => {
+    inputRef.current?.focus();
+  };
+
   return {
     models: { text, inputRef, focusedInputIndex },
-    actions: { handlePress, handleTextChange, clear },
+    actions: { handlePress, handleTextChange, clear, focus },
     forms: { setText, setTextWithRef },
   };
 };
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -2,6 +2,11 @@ declare module "OTPInput" {
   import { ColorValue, TextStyle, ViewStyle } from "react-native";
 
   export interface OtpEntryProps {
+    /**
+     * Autofocus.
+     */
+    autoFocus: boolean;
+
     /**
      * The number of digits to be displayed in the OTP entry.
      */
@@ -35,6 +40,11 @@ declare module "OTPInput" {
      */
     clear: () => void;
 
+    /**
+     * Focus of the OTP input.
+     */
+    focus: () => void;
+
     /**
      * Sets the value of the OTP input.
      * @param value - The value to be set.