From 1def199253fd2e9ee78c74cc6eb528de4ce26749 Mon Sep 17 00:00:00 2001
From: Maharshi Alpesh <maharshialpesh@gmail.com>
Date: Mon, 9 Dec 2024 13:45:37 +0530
Subject: [PATCH 1/2] fix: autofocus the input-otp when auto-focus prop is
 passed

---
 .changeset/smooth-trainers-walk.md                |  5 +++++
 .../input-otp/__tests__/input-otp.test.tsx        | 15 +++++++++++++++
 .../components/input-otp/src/use-input-otp.ts     |  1 +
 3 files changed, 21 insertions(+)
 create mode 100644 .changeset/smooth-trainers-walk.md

diff --git a/.changeset/smooth-trainers-walk.md b/.changeset/smooth-trainers-walk.md
new file mode 100644
index 0000000000..28b9a7b580
--- /dev/null
+++ b/.changeset/smooth-trainers-walk.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/input-otp": patch
+---
+
+Fixing the autofocus functionality in input-otp component(#4250)
diff --git a/packages/components/input-otp/__tests__/input-otp.test.tsx b/packages/components/input-otp/__tests__/input-otp.test.tsx
index c8abb683fb..e8a59d19c9 100644
--- a/packages/components/input-otp/__tests__/input-otp.test.tsx
+++ b/packages/components/input-otp/__tests__/input-otp.test.tsx
@@ -168,6 +168,21 @@ describe("InputOtp Component", () => {
     expect(onComplete).toHaveBeenCalledTimes(2);
     expect(onComplete).toHaveBeenCalledWith("1234");
   });
+
+  it("should autofocus when autofocus prop is passed.", async () => {
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    render(<InputOtp autoFocus length={4} />);
+    const segments = screen.getAllByRole("presentation");
+
+    expect(segments[0]).toHaveAttribute("data-focus", "true");
+  });
+
+  it("should not autofocus when autofocus prop is not passed.", async () => {
+    render(<InputOtp length={4} />);
+    const segments = screen.getAllByRole("presentation");
+
+    expect(segments[0]).not.toHaveAttribute("data-focus", "true");
+  });
 });
 
 describe("InputOtp with react-hook-form", () => {
diff --git a/packages/components/input-otp/src/use-input-otp.ts b/packages/components/input-otp/src/use-input-otp.ts
index c7967ad8cd..842125cf0e 100644
--- a/packages/components/input-otp/src/use-input-otp.ts
+++ b/packages/components/input-otp/src/use-input-otp.ts
@@ -230,6 +230,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
         ref: inputRef,
         name: name,
         value: value,
+        autoFocus: originalProps.autoFocus,
         onChange: setValue,
         onBlur: chain(focusProps.onBlur, props?.onBlur),
         onComplete: onComplete,

From 780d88a6f2c99871b10dd3de7bb606e2194b5fab Mon Sep 17 00:00:00 2001
From: Maharshi Alpesh <maharshialpesh@gmail.com>
Date: Mon, 9 Dec 2024 20:39:58 +0530
Subject: [PATCH 2/2] fix: adding marcus' suggestions

---
 apps/docs/content/docs/components/input-otp.mdx            | 6 ++++++
 packages/components/input-otp/__tests__/input-otp.test.tsx | 4 ++--
 packages/components/input-otp/src/use-input-otp.ts         | 3 ++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/docs/content/docs/components/input-otp.mdx b/apps/docs/content/docs/components/input-otp.mdx
index 38e03653b1..854a35ec30 100644
--- a/apps/docs/content/docs/components/input-otp.mdx
+++ b/apps/docs/content/docs/components/input-otp.mdx
@@ -303,6 +303,12 @@ You can customize the styles of the `InputOtp` component using the `classNames`
       description: "Allows to set custom class names for the Input slots.",
       default: "-"
     },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the element should receive focus on render.",
+      default: "false"
+    },
     {
       attribute: "textAlign",
       type: "left | center | right",
diff --git a/packages/components/input-otp/__tests__/input-otp.test.tsx b/packages/components/input-otp/__tests__/input-otp.test.tsx
index e8a59d19c9..36f967f183 100644
--- a/packages/components/input-otp/__tests__/input-otp.test.tsx
+++ b/packages/components/input-otp/__tests__/input-otp.test.tsx
@@ -169,7 +169,7 @@ describe("InputOtp Component", () => {
     expect(onComplete).toHaveBeenCalledWith("1234");
   });
 
-  it("should autofocus when autofocus prop is passed.", async () => {
+  it("should autofocus when autofocus prop is passed.", () => {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     render(<InputOtp autoFocus length={4} />);
     const segments = screen.getAllByRole("presentation");
@@ -177,7 +177,7 @@ describe("InputOtp Component", () => {
     expect(segments[0]).toHaveAttribute("data-focus", "true");
   });
 
-  it("should not autofocus when autofocus prop is not passed.", async () => {
+  it("should not autofocus when autofocus prop is not passed.", () => {
     render(<InputOtp length={4} />);
     const segments = screen.getAllByRole("presentation");
 
diff --git a/packages/components/input-otp/src/use-input-otp.ts b/packages/components/input-otp/src/use-input-otp.ts
index 842125cf0e..2604ba6a63 100644
--- a/packages/components/input-otp/src/use-input-otp.ts
+++ b/packages/components/input-otp/src/use-input-otp.ts
@@ -230,7 +230,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
         ref: inputRef,
         name: name,
         value: value,
-        autoFocus: originalProps.autoFocus,
+        autoFocus,
         onChange: setValue,
         onBlur: chain(focusProps.onBlur, props?.onBlur),
         onComplete: onComplete,
@@ -255,6 +255,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
       setValue,
       props.onBlur,
       onComplete,
+      autoFocus,
     ],
   );