From 645b8ea06bf3f0145e6cb897995368edb8116482 Mon Sep 17 00:00:00 2001
From: Peterl561 <peter.liu@treelab.com>
Date: Fri, 20 Dec 2024 15:31:38 -0800
Subject: [PATCH 1/3] fix(input-otp): form validation hook missing behavior

---
 packages/components/input-otp/src/use-input-otp.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/input-otp/src/use-input-otp.ts b/packages/components/input-otp/src/use-input-otp.ts
index 0206c4565d..70cd41947f 100644
--- a/packages/components/input-otp/src/use-input-otp.ts
+++ b/packages/components/input-otp/src/use-input-otp.ts
@@ -158,7 +158,7 @@ export function useInputOtp(originalProps: UseInputOtpProps) {
   });
 
   useFormReset(inputRef, value, setValue);
-  useFormValidation(props, validationState, inputRef);
+  useFormValidation({...props, validationBehavior}, validationState, inputRef);
 
   const {
     isInvalid: isAriaInvalid,

From 150b9be38f37ad53534acaf89984b66c39ec3316 Mon Sep 17 00:00:00 2001
From: Peterl561 <peter.liu@treelab.com>
Date: Fri, 20 Dec 2024 15:57:40 -0800
Subject: [PATCH 2/3] test(input-otp): isRequired form test

---
 .../input-otp/__tests__/input-otp.test.tsx    | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/packages/components/input-otp/__tests__/input-otp.test.tsx b/packages/components/input-otp/__tests__/input-otp.test.tsx
index c1ad664d05..5aec1cbf41 100644
--- a/packages/components/input-otp/__tests__/input-otp.test.tsx
+++ b/packages/components/input-otp/__tests__/input-otp.test.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import {render, renderHook, screen} from "@testing-library/react";
 import {Controller, useForm} from "react-hook-form";
 import userEvent, {UserEvent} from "@testing-library/user-event";
+import {Form} from "@nextui-org/form";
 
 import {InputOtp} from "../src";
 
@@ -185,6 +186,45 @@ describe("InputOtp Component", () => {
   });
 });
 
+describe("Validation", () => {
+  let user: UserEvent;
+
+  beforeAll(() => {
+    user = userEvent.setup();
+  });
+
+  it("supports isRequired when validationBehavior=native", async () => {
+    const {getByTestId} = render(
+      <Form validationBehavior="native">
+        <InputOtp isRequired data-testid="base" length={4} />
+        <button data-testid="submit" type="submit" />
+        <button data-testid="reset" type="reset" />
+      </Form>,
+    );
+
+    const inputOtpBase = getByTestId("base");
+
+    expect(inputOtpBase).toHaveAttribute("aria-required", "true");
+    expect(inputOtpBase).not.toHaveAttribute("data-invalid");
+
+    const submitButton = getByTestId("submit");
+
+    await user.click(submitButton);
+
+    expect(inputOtpBase).toHaveAttribute("data-invalid", "true");
+    const errorMessage = document.querySelector("[data-slot='error-message']");
+
+    expect(errorMessage).toBeInTheDocument();
+
+    const resetButton = getByTestId("reset");
+
+    await user.click(resetButton);
+
+    expect(inputOtpBase).not.toHaveAttribute("data-invalid");
+    expect(errorMessage).not.toBeInTheDocument();
+  });
+});
+
 describe("InputOtp with react-hook-form", () => {
   let user: UserEvent;
 

From 4f0f474da167c189d5b6587cde9c54ece598c2da Mon Sep 17 00:00:00 2001
From: Peterl561 <peter.liu@treelab.com>
Date: Fri, 20 Dec 2024 16:00:44 -0800
Subject: [PATCH 3/3] chore(changeset): fixed input-otp isRequired error
 message

---
 .changeset/nasty-dolls-tease.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/nasty-dolls-tease.md

diff --git a/.changeset/nasty-dolls-tease.md b/.changeset/nasty-dolls-tease.md
new file mode 100644
index 0000000000..52e9fe1b33
--- /dev/null
+++ b/.changeset/nasty-dolls-tease.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/input-otp": patch
+---
+
+fixed isRequired not showing error when validationBehavior=native is not explicitly set