fix(input-otp): form validation hook missing behavior prop #4417
Conversation
🦋 Changeset detectedLatest commit: 4f0f474 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe pull request introduces a patch for the Changes
Sequence DiagramsequenceDiagram
participant User
participant Form
participant InputOTP
participant Validation
User->>Form: Submit form
Form->>InputOTP: Check validation
InputOTP->>Validation: Validate input
alt Input is invalid
Validation-->>InputOTP: Return error
InputOTP-->>Form: Display error
Form-->>User: Show validation message
else Input is valid
Validation-->>InputOTP: Validation passes
InputOTP-->>Form: Confirm valid input
end
Possibly related PRs
Suggested labels
Suggested reviewers
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
.changeset/nasty-dolls-tease.md (1)
1-5: Consider enhancing the changelog messageThe current message could be more descriptive. Consider expanding it to:
-fixed isRequired not showing error when validationBehavior=native is not explicitly set +fixed isRequired validation not triggering error states when validationBehavior=native was not explicitly set. This ensures proper form validation behavior for required OTP inputs regardless of how the validationBehavior is configured.packages/components/input-otp/__tests__/input-otp.test.tsx (1)
189-226: LGTM! Good test coverage for the fixThe test suite effectively verifies the fix by checking:
- Required attribute propagation
- Error state on invalid submission
- Error state clearing on reset
Consider adding these test cases to improve coverage:
it("should work with implicit validationBehavior", async () => { const {getByTestId} = render( <Form> <InputOtp isRequired data-testid="base" length={4} /> <button data-testid="submit" type="submit" /> </Form> ); // ... similar validation checks }); it("should show correct error message for required field", async () => { const {getByTestId} = render( <Form validationBehavior="native"> <InputOtp isRequired data-testid="base" length={4} errorMessage="This field is required" /> <button data-testid="submit" type="submit" /> </Form> ); // ... verify error message content });
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
.changeset/nasty-dolls-tease.md(1 hunks)packages/components/input-otp/__tests__/input-otp.test.tsx(2 hunks)packages/components/input-otp/src/use-input-otp.ts(1 hunks)
🔇 Additional comments (1)
packages/components/input-otp/src/use-input-otp.ts (1)
161-161: LGTM! Correct fix for validation behavior propagation
The change ensures that validationBehavior is explicitly passed to useFormValidation, fixing the issue where required validation wasn't working correctly.
Closes #
📝 Description
validationBehaviorwasn't being passed properly touseFormValidationhook inuse-input-otpuseLayoutEffectinuseFormValidationfrom executingvalidationState.updateValidation⛳️ Current behavior (updates)
before.1.mp4
🚀 New behavior
after.1.mp4
💣 Is this a breaking change (Yes/No):
No
📝 Additional Information
Summary by CodeRabbit
Bug Fixes
isRequiredproperty not displaying errors for theInputOtpcomponent when using native validation.Tests
InputOtpcomponent, ensuring correct behavior of required fields and error handling.Chores
useInputOtpfunction to improve how validation behavior is applied.