Focus and Blur events

README.md

@@ -72,6 +72,21 @@ export default function App() {
     <td>A function that returns the input that is supposed to be rendered for each of the input fields. 
       The function will get two arguments: <code>inputProps</code> and <code>index</code>. <code>inputProps</code> is an object that contains all the props <b>that should be passed to the input being rendered</b> (Overriding these props is not recommended because it might lead to some unexpected behaviour). <code>index</code> is the index of the input being rendered.
     </td>
+  </tr>
+    <tr>
+    <td>onBlur</td>
+    <td>function</td>
+    <td>false</td>
+    <td>none</td>
+    <td>Called when OTP has lost focus</td>
+  </tr>
+  </tr>
+    <tr>
+    <td>onFocus</td>
+    <td>function</td>
+    <td>false</td>
+    <td>none</td>
+    <td>Called when OTP has received focus. The <code>index</code> of the input gaining focus is passed as the first argument</td>
   </tr>
   <tr>
     <td>onChange</td>

example/src/App.tsx

@@ -107,6 +107,8 @@ function App() {
             <p>Enter verification code</p>
             <div className="margin-top--small">
               <OTPInput
+                onFocus={() => console.log('OTP gained focus!')}
+                onBlur={() => console.log('OTP lost Focus!')}
                 inputStyle="inputStyle"
                 numInputs={numInputs}
                 onChange={handleOTPChange}

src/index.tsx

@@ -28,6 +28,10 @@ interface OTPInputProps {
   value?: string;
   /** Number of OTP inputs to be rendered */
   numInputs?: number;
+  /** Callback to be called when the OTP has lost focus */
+  onBlur?: () => void;
+  /** Callback to be called when the OTP has received focued */
+  onFocus?: (index: number) => void;
   /** Callback to be called when the OTP value changes */
   onChange: (otp: string) => void;
   /** Function to render the input */
@@ -51,6 +55,8 @@ const isStyleObject = (obj: unknown) => typeof obj === 'object' && obj !== null;
 const OTPInput = ({
   value = '',
   numInputs = 4,
+  onBlur,
+  onFocus,
   onChange,
   renderInput,
   shouldAutoFocus = false,
@@ -117,10 +123,18 @@ const OTPInput = ({
   const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => (index: number) => {
     setActiveInput(index);
     event.target.select();
+
+    if (!inputRefs.current.includes(event.relatedTarget as HTMLInputElement)) {
+      onFocus?.(index);
+    }
   };
 
-  const handleBlur = () => {
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     setActiveInput(activeInput - 1);
+
+    if (!inputRefs.current.includes(event.relatedTarget as HTMLInputElement)) {
+      onBlur?.();
+    }
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {