fix(input-otp): form validation hook missing behavior prop

.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

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;
 

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,