expose blur ref (#103)

Author: akuul

README.MD

@@ -144,6 +144,7 @@ The `react-native-otp-entry` component exposes these functions with `ref`:
 | ---------- | ------------------------ | ---------------------------------- |
 | `clear`    | () => void;              | Clears the value of the OTP input. |
 | `focus`    | () => void;              | Focus of the OTP input.            |
+| `blur`     | () => void;              | Blurs the OTP input.               |
 | `setValue` | (value: string) => void; | Sets the value of the OTP input.   |
 
 ## License

src/OtpInput/OtpInput.tsx

@@ -9,7 +9,7 @@ import { useOtpInput } from "./useOtpInput";
 export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
   const {
     models: { text, inputRef, focusedInputIndex, isFocused, placeholder },
-    actions: { clear, handlePress, handleTextChange, focus, handleFocus, handleBlur },
+    actions: { clear, handlePress, handleTextChange, focus, handleFocus, handleBlur, blur },
     forms: { setTextWithRef },
   } = useOtpInput(props);
   const {
@@ -37,7 +37,7 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
     placeholderTextStyle,
   } = theme;
 
-  useImperativeHandle(ref, () => ({ clear, focus, setValue: setTextWithRef }));
+  useImperativeHandle(ref, () => ({ clear, focus, setValue: setTextWithRef, blur }));
 
   const generatePinCodeContainerStyle = (isFocusedContainer: boolean, char: string) => {
     const stylesArray = [styles.codeContainer, pinCodeContainerStyle];

src/OtpInput/OtpInput.types.ts

@@ -24,6 +24,7 @@ export interface OtpInputRef {
   clear: () => void;
   focus: () => void;
   setValue: (value: string) => void;
+  blur: () => void;
 }
 
 export interface Theme {

src/OtpInput/__tests__/useOtpInput.test.ts

@@ -48,6 +48,17 @@ describe("useOtpInput", () => {
     });
   });
 
+  test("blur() should blur input", () => {
+    jest.spyOn(React, "useRef").mockReturnValueOnce({ current: { blur: jest.fn() } } as any);
+
+    const { result } = renderUseOtInput();
+    result.current.actions.blur();
+
+    act(() => {
+      expect(result.current.models.inputRef.current?.blur).toHaveBeenCalled();
+    });
+  });
+
   test("setTextWithRef() should only call setText the first 'numberOfDigits' characters", () => {
     jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]);
     const { result } = renderUseOtInput();

src/OtpInput/useOtpInput.ts

@@ -61,6 +61,10 @@ export const useOtpInput = ({
     inputRef.current?.focus();
   };
 
+  const blur = () => {
+    inputRef.current?.blur();
+  };
+
   const handleFocus = () => {
     setIsFocused(true);
     onFocus?.();
@@ -73,7 +77,7 @@ export const useOtpInput = ({
 
   return {
     models: { text, inputRef, focusedInputIndex, isFocused, placeholder },
-    actions: { handlePress, handleTextChange, clear, focus, handleFocus, handleBlur },
+    actions: { handlePress, handleTextChange, clear, focus, blur, handleFocus, handleBlur },
     forms: { setText, setTextWithRef },
   };
 };

src/index.d.ts

@@ -107,6 +107,11 @@ declare module "OTPInput" {
      * @param value - The value to be set.
      */
     setValue: (value: string) => void;
+
+    /**
+     * Blur the OTP input.
+     */
+    blur: () => void;
   }
 
   export interface Theme {