fix(input-otp): autofocus

.changeset/smooth-trainers-walk.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/input-otp": patch
+---
+
+Fixing the autofocus functionality in input-otp component(#4250)

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",

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.", () => {
+    // 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.", () => {
+    render(<InputOtp length={4} />);
+    const segments = screen.getAllByRole("presentation");
+
+    expect(segments[0]).not.toHaveAttribute("data-focus", "true");
+  });
 });
 
 describe("InputOtp with react-hook-form", () => {

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,
         onChange: setValue,
         onBlur: chain(focusProps.onBlur, props?.onBlur),
         onComplete: onComplete,
@@ -254,6 +255,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
       setValue,
       props.onBlur,
       onComplete,
+      autoFocus,
     ],
   );