fix(input): fixed a sliding issue caused by the helper wrapper

[mstfblci]

Closes #

📝 Description

If isInvalid was false but errorMessage was filled, helper-wrapper was created and a sliding problem was experienced. This was prevented by updating the conditions.

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

• New Features

  • Enhanced conditional rendering for helper text in Input, Textarea, and Select components, ensuring clarity based on validation states.

• Bug Fixes

  • Improved visual stability by preventing unnecessary layout shifts related to the rendering of helper wrappers.

• Documentation

  • Updated type definitions to reflect changes in Input and Select components.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1e3014a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@nextui-org/select	Patch
@nextui-org/input	Patch
@nextui-org/react	Patch
@nextui-org/autocomplete	Patch

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

[vercel]

@mstfblci is attempting to deploy a commit to the NextUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

The pull request introduces modifications to the Input, Textarea, and Select components within the codebase. Key changes include updates to the conditional rendering logic for helper text and wrappers, ensuring they display only when relevant information (like error messages or descriptions) is present. The memoization logic has been refined for clarity and readability, simplifying the conditions under which helper content is rendered. Additionally, there are minor updates to type definitions in the Input and Select components, but no significant alterations to the overall functionality or interface of these components.

Changes

File Path	Change Summary
packages/components/input/src/input.tsx	Updated helper wrapper logic to check for isInvalid, errorMessage, and description. Simplified conditional rendering structure. Updated InputProps interface.
packages/components/input/src/textarea.tsx	Modified helper text rendering logic to check for isInvalid, errorMessage, and description. Adjusted JSX structure for new conditional logic.
packages/components/select/src/select.tsx	Changed helper wrapper logic to check for isInvalid, errorMessage, and description. Simplified rendering logic for helper content. Updated SelectProps type alias.
.changeset/empty-helper-wrapper-div.md	Fixed UI sliding issue by ensuring helper wrapper is not rendered when isInvalid is false, improving visual stability.

Possibly related PRs

• fix(components): improve RTL support for select component #2041: The changes in the Textarea component's helper text rendering logic are similar to the modifications made in the Input component regarding the helper wrapper, indicating a related focus on conditional rendering based on component state.
• fix(theme): fullWidth in input and select #3768: The fix for the fullWidth functionality in the Input component directly relates to the changes made in the main PR, as both involve adjustments to the rendering behavior of the input components.
• fix(input): ensure clear button is not focusable when disabled #3774: The update ensuring that the clear button is not focusable when the input is disabled is closely related to the changes in the Input component's rendering logic, particularly regarding user interaction and accessibility.
• fix(theme): fixing the label placement in select and input #3869: The adjustments made to the label placement in the Input component align with the changes in the main PR, focusing on improving the user interface and usability of the input components.

Suggested labels

👀 Status: In Review

Suggested reviewers

• jrgarciadev
• wingkwong

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 4f9378f and 1e3014a.

📒 Files selected for processing (1)

• .changeset/empty-helper-wrapper-div.md (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• .changeset/empty-helper-wrapper-div.md

---

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?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 8de427b and e125498.

📒 Files selected for processing (3)

• packages/components/input/src/input.tsx (1 hunks)
• packages/components/input/src/textarea.tsx (1 hunks)
• packages/components/select/src/select.tsx (1 hunks)

🔇 Additional comments (4)

packages/components/input/src/input.tsx (2)

46-46: LGTM: Fixed helper wrapper sliding issue

The new condition !((isInvalid && errorMessage) || description) correctly prevents the helper wrapper from being created when isInvalid is false but errorMessage exists, resolving the sliding issue.

---

51-54: Verify error message visibility behavior

The rendering logic looks correct, but let's verify that error messages are only visible when intended.

✅ Verification successful

Let me analyze the error message visibility behavior across the input components based on the search results.

The search reveals that error messages are consistently handled in both Input and Textarea components:

1. In input.tsx (the file under review):

   • Error message is shown only when isInvalid && errorMessage is true
   • Otherwise, it shows the description

2. In textarea.tsx:

   • Same conditional logic: isInvalid && errorMessage
   • Identical fallback to description

3. In use-input.ts:

   • Error message is derived from props or validation errors
   • Proper className handling for error message styling

Error message visibility logic is consistent and correct

The error message rendering behavior is properly implemented with consistent visibility conditions across input components. The message only appears when the input is invalid and an error message is provided.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for any other error message rendering logic in Input components
# that might conflict with this change

# Search for error message rendering patterns in input-related files
rg -A 3 'errorMessage.*\?' packages/components/input/

Length of output: 1911

packages/components/select/src/select.tsx (1)

Line range hint 68-75: Verify memoization of helper getter functions.

The helper wrapper's useMemo dependencies include several getter functions. To optimize performance, these functions should be memoized in the useSelect hook.

Let's verify the memoization of these functions:

packages/components/input/src/textarea.tsx (1)

146-154: LGTM! The helper wrapper logic has been improved.

The updated conditional rendering logic effectively addresses the sliding issue by ensuring the helper wrapper is only created when necessary. The new implementation properly handles these cases:

• Shows error message when both isInvalid is true and errorMessage exists
• Shows description when available and no error state exists
• Prevents wrapper creation when conditions aren't met, fixing the sliding issue

[wingkwong]

1. please add a changeset
2. please provide a before and after screenshots

[mstfblci]

@wingkwong This removes extra spacing by skipping the helper-wrapper div when it’s not needed.

before

after

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)

.changeset/empty-helper-wrapper-div.md (1)

1-6: Enhance the changeset description to better document the bug fix.

While the technical changes are documented, the description could be more comprehensive by including:

• The specific sliding issue that was fixed
• The user-facing impact of these changes
• The conditions that triggered the bug

Consider updating the description to something like:

---
"@nextui-org/select": patch
"@nextui-org/input": patch
---

- Fixed a UI sliding issue caused by the helper wrapper being rendered when `isInvalid` was false but `errorMessage` was present
- Added proper conditions for `isInvalid`, `errorMessage`, and `description` states to prevent unnecessary helper wrapper rendering
- Improved the components' stability by ensuring helper text only appears when relevant information is available

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 03ef1c6 and 4f9378f.

📒 Files selected for processing (1)

• .changeset/empty-helper-wrapper-div.md (1 hunks)

[mstfblci]

Did you verify the changes? @wingkwong

[wingkwong]

not yet. you will see the comments here when I do.

[jrgarciadev]

Thank you! @mstfblci it will be available in the next beta version 2.5.0-beta.2