fix: adding marcus' suggestions

Author: macci001

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

@@ -169,15 +169,15 @@ 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");
 
     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");
 

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,
     ],
   );