fix(input): use onPress for wrapper click focus

[Peterl561]

Closes #4287
note that this bug occurs in docs due to the Overlay from NavbarMenu, which is another bug (see #4490)

📝 Description

• when Input wrappers are clicked, an onClick handler focuses the <input>
• this causes issues as it bypasses Overlay's ability to control focus (don't quote me on this)
• use onPress instead for consistency
• added a test for input click focus

⛳️ Current behavior (updates)

clicking on input (blue) will close listbox first due to Modal Overlay while clicking on wrapper (red) will immediately focus on input due to onClick ignoring Overlay

before.mp4

🚀 New behavior

with onPress, clicking wrapper (red) will behave the same as clicking input (blue)

after.mp4

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

No

📝 Additional Information

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Enhanced input component interaction by ensuring consistent focus when clicking on input wrappers.
  • Improved user experience for input field interactions.

• Tests

  • Added test case to verify input focusing behavior when clicking the input or its wrappers.

• Bug Fixes

  • Resolved input focus management for consistent user interaction across different input wrapper scenarios.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nextui-docs-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 4, 2025 1:55am
nextui-storybook-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 4, 2025 1:55am

[coderabbitai]

Walkthrough

The pull request introduces changes to the @nextui-org/input package, focusing on improving input component interaction. The modifications enhance the focus behavior by implementing a new method handleInputWrapperClick that allows focusing the input element when its wrapper is clicked. This change is implemented using the usePress hook and modifies the input component's interaction handling to provide a more intuitive user experience.

Changes

File	Change Summary
packages/components/input/src/use-input.ts	- Added handleInputWrapperClick function - Introduced inputWrapperPressProps using usePress hook - Modified getInputWrapperProps to include new press properties
packages/components/input/__tests__/input.test.tsx	- Added new test case to verify input focus behavior - Tested clicking on input, inner wrapper, and input wrapper
.changeset/friendly-hounds-walk.md	Patch file for the @nextui-org/input package

Assessment against linked issues

Objective	Addressed	Explanation
Popover-based components opening issue [#4287]	❓	Partial improvement in focus handling, but may not fully resolve popover opening inconsistency

Possibly related PRs

• fix(input): added hover and focus to input when label placement is outside-left #2958: This PR addresses hover and focus behavior in the @nextui-org/input component, which is directly related to the focus behavior changes made in the main PR for the Input component.
• fix(theme): make select styles consistent with input #3881: This PR focuses on making the styles of the select component consistent with the input component, which aligns with the main PR's changes to the Input component's focus behavior.
• fix(input): fixed a sliding issue caused by the helper wrapper #3966: This PR fixes a sliding issue related to the helper wrapper in the Input component, which is relevant to the changes made in the main PR regarding user interaction with the input.
• fix: input in card becomes invisible on hover and making date-input and time-input consistent #4394: This PR addresses the visibility of the input within a card component, which is directly related to the focus behavior and user interaction improvements made in the main PR.

Suggested labels

👀 Status: To Review

Suggested reviewers

• wingkwong
• jrgarciadev

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0066510 and ea787c3.

📒 Files selected for processing (1)

• .changeset/friendly-hounds-walk.md (1 hunks)

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

• .changeset/friendly-hounds-walk.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 generate docstrings to generate docstrings for this PR. (Beta)
• @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.

[changeset-bot]

🦋 Changeset detected

Latest commit: ea787c3

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

This PR includes changesets to release 3 packages

Name	Type
@nextui-org/input	Patch
@nextui-org/autocomplete	Patch
@nextui-org/react	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

[jrgarciadev]

@wingkwong please check