fix(input): input box shifts upwards after adding the errorMessage #2732

wingkwong · 2024-04-16T09:12:48Z

Closes #2730

📝 Description

Add a brief description

⛳️ Current behavior (updates)

pr2732-issue-demo.webm

🚀 New behavior

pr2732-demo.webm

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

📝 Additional Information

* refactor(input): remove duplicate test * refactor(input): remove unncessary waitFor

* fix(radio): avoid overriding required props * fix(radio): merge with domRef * feat(changeset): fixed missing required props and validationMessage * fix(radio): unnecessary mergeRefs

* feat(calendar): initial structure * feat(calendar): calendar structure completed, styles in progress * chore(calendar): dark colors adjusted * feat(calendar): styles improved, variants added, animations added with framer motion * chore(calendar): animation changed, shadow improved * chore(calendar): disableAnimation support added as well as weekDays format * feat(calendar): more stories added * chore(calendar): refactor calendar cell styling * feat(calendar): create calendar function added to the root provider * feat(calendar): invalid state and error message added * feat(calendar): calendar picker added, provider modified * feat(root): object.values deps replaced by new func, intersection hoook added, types version unified * feat(calendar): calendar pickers in progress * feat(calendar): calendar pickers added * fix(calendar): year label formatting * chore(calendar): add layout parameter to Calendar stories * feat(calendar): pickers completed, context added * feat(calendar): visibleMonths supported, warnings fixed, tests added

… v.2.3.0

…ponent

…ue) (#2637) Co-authored-by: shrinidhi.upadhyaya <[email protected]>

* feat(calendar): range calendar added, calendar and context adapted * feat(calendar): range calendar stories added * chore(calendar): range calendar tests added * fix(calendar): update calendar styles to adjust to dynamic width

* feat(date-picker): date field component initialized * chore(date-picker): date field renamed to date-input * feat(date-picker): date input completed * chore(date-input): commented code removed

* feat: rename newPost to new (#2665) * fix(avatar): spread getAvatarGroupCountProps in avatar count * feat(avatar): support slots in avatarGroup * feat(avatar): support classNames and add getAvatarGroupCountProps * feat(docs): add classNames to avatar group * feat(avatar): add CustomSlots in avatar group * feat(changeset): support slots in avatar group --------- Co-authored-by: winches <[email protected]>

* feat(date-picker): first iteration * chore(date-picker): update date-picker README.md with improved description * feat(date-picker): code organized, integration done * fix(date-picker): min and max value + styles * fix(date-picker): popover offset adn calendar styles * feat(date-picker): stories added * fix(date-picker): calendar width properly handled * feat(date-picker): styles simplified * chore(date-picker): almost all test passing * fix(date-picker): test and styles * chore(date-picker): calendar popover tests added * fix(date-picker): props to be passed to the date-input

* feat(time-input): time input added with some stories, tests and date-picker integration missing * feat(time-input): tests added, date-picker integration added, missing stories added

* chore(date-range-picker): in progress * chore(date-range-picker): in progress * feat(date-input): components separated into multiple pieces to be able to implement the date range picker * feat(date-range-picker): first version of it working * chore(date-picker): hyphen symbol changed * feat(date-range-picker): stories done

* feat(docs): add calendar in routes.json * feat(docs): refresh search-meta.json * feat(docs): add calendar examples * feat(docs): calendar content * feat(deps): add @internationalized/date * refactor(docs): remove div wrapper * feat(docs): add calendar doc * fix(docs): calendar presets * fix(docs): preset styles * chore(docs): remove calendar iframe examples * refactor(docs): discard iframe in calendar doc * fix(docs): incorrect DateValue import * feat(docs): include @internationalized/date in live demo scope * feat(docs): add presets description * chore(docs): update search-meta.json * fix(docs): remove DateValue * feat(docs): include reactAriaI18n in react live demo scope * fix(docs): presets import issue * chore(docs): update search-meta.json * feat(docs): add api reference for nextui provider * fix(calendar): ixExpanded typo * feat(docs): add missing props & event * chore(docs): update search-meta.json * chore(docs): update route keywords * chore(docs): revise value style add defaultFocusedValue * chore(docs): remove padding and revise gap * feat(docs): range calendar * chore(docs): update search-meta.json * feat(docs): add reactAriaHook * fix(docs): incorrect component and add storybook and reactAriaHook * fix(docs): incorrect import path * chore(docs): reorder range calendar position in sidebar * chore(Docs): remove custom styles & implementation * chore(docs): remove last item from accessibility * chore(docs): onValueChange -> onChange * feat(docs): add ts example for range calendar * chore(docs): remove unwanted content in range calendar * feat(docs): add ts examples for calendar * chore(docs): update import path * chore(docs): update import path * chore(docs): styles adjusted, routes updated --------- Co-authored-by: Junior Garcia <[email protected]>

* feat(docs): add time input to routes.json * feat(deps): add @internationalized/date * feat(docs): add @internationalized/date and @react-aria/i18n to code demo scopes * feat(docs): time input contetnt * chore(docs): revise time input examples * feat(docs): time input content * chore(time-input): update description * feat(docs): add ts examples in time-input * chore(docs): revise TimeValue import --------- Co-authored-by: Junior Garcia <[email protected]>

* chore: created base for date-range-picker doc * fix: added follow-up story examples to the doc * fix: fixed bugs happening on the doc * fix: fixed bugs happening on the doc * fix(docs): incorrect file path and revise title * fix: component examples style fixes * fix: component presets typo fix * refactor(core): date range picker docs completed, standaline date picker field fixed --------- Co-authored-by: HaRuki Kuriwada <[email protected]> Co-authored-by: աɨռɢӄաօռɢ <[email protected]> Co-authored-by: Junior Garcia <[email protected]>

…nimations (#2596) * chore(deps): bump framer-motion * feat(changeset): fixed framer motion issue * chore(changeset): revise changeset message * chore(deps): update pnpm-lock.yaml

* fix(input): pass domRef?.current?.value to controlled state * fix(input): pass domRef?.current?.value to useTextField instead * fix(checkbox): handle RHF case * fix(checkbox): add missing isSelected case * chore(checkbox): update ref type * chore(deps): add @nextui-org/use-safe-layout-effect * chore(deps): update pnpm-lock.yaml * chore(deps): update pnpm-lock.yaml * fix(select): handle RHF case * chore(deps): add @nextui-org/use-safe-layout-effect to select * fix(autocomplete): handle RHF case * chore(deps): add @nextui-org/use-safe-layout-effect to autocomplete * refactor(components): revise comments * feat(changeset): react-hook-form uncontrolled components * chore(deps): pnpm-lock.yaml * fix(input): domRef.current.value has higher precedence * fix(checkbox): set isChecked based on input ref checked

* feat(components): tabs component add tabPosition prop * fix: review problem change * test: add tabs position vertical test * docs: update changeset * fix(tabs): optimize return of tabs * fix(tabs): rename orientation to placement * fix(tabs): optimize description

* feat(autocomplete): add isReadOnly example * fix(autocomplete): isReadOnly logic in Autocomplete * feat(root): add changeset - fixed isReadOnly logic in Autocomplete * chore(autocomplete component) isReadOnly property demo isReadOnly property demo in website MDX for autocomplete component. * Update apps/docs/content/docs/components/autocomplete.mdx Co-authored-by: Junior Garcia <[email protected]> --------- Co-authored-by: աɨռɢӄաօռɢ <[email protected]> Co-authored-by: Alpha <[email protected]> Co-authored-by: Junior Garcia <[email protected]>

…s true (#2722)

* chore(docs): blog changes * feat(docs): blog improved * chore(blog): draft param added

linear · 2024-04-16T09:12:51Z

ENG-641 [BUG] - input box shifts upwards atfer adding the errorMessage

changeset-bot · 2024-04-16T09:12:51Z

🦋 Changeset detected

Latest commit: cccdd52

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

coderabbitai · 2024-04-16T09:12:53Z

Important

Auto Review Skipped

Auto reviews are disabled on base/target branches other than the default branch. Please add the base/target branch pattern to the list of additional branches to be reviewed in the settings.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

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

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>.
- 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 generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @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.

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 as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

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.

vercel · 2024-04-16T09:12:56Z

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	Apr 16, 2024 9:18am
nextui-storybook-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 16, 2024 9:18am

wingkwong and others added 30 commits March 31, 2024 12:17

refactor(input): input ref test (#2613)

84e1b40

* refactor(input): remove duplicate test * refactor(input): remove unncessary waitFor

fix(radio): isRequired & missing warning message in Form (#2597)

bc33d31

* fix(radio): avoid overriding required props * fix(radio): merge with domRef * feat(changeset): fixed missing required props and validationMessage * fix(radio): unnecessary mergeRefs

Merge branch 'main' of github.com:nextui-org/nextui into v.2.3.0

35ea46b

Merge branch 'main' of github.com:nextui-org/nextui into v.2.3.0

88745d2

chore(root): changeset

81385f7

chore(calendar): add topContent and bottomContent props to calendar

edd742b

Merge branch 'main' of github.com:nextui-org/nextui into v.2.3.0

d28b376

chore(root): merge branch 'main' of github.com:nextui-org/nextui into…

75c1dd4

… v.2.3.0

feat(calendar): add @nextui-org/radio package and update calendar com…

c8a161d

…ponent

refactor: assigned type(DateValue) to focusedDate(ControlledFocusedVa…

73621d6

…ue) (#2637) Co-authored-by: shrinidhi.upadhyaya <[email protected]>

Range Calendar 📆 (#2634)

92bfc77

* feat(calendar): range calendar added, calendar and context adapted * feat(calendar): range calendar stories added * chore(calendar): range calendar tests added * fix(calendar): update calendar styles to adjust to dynamic width

Merge branch 'main' of github.com:nextui-org/nextui into v.2.3.0

aeae437

Date Input 🗓️ (#2641)

eea1b92

* feat(date-picker): date field component initialized * chore(date-picker): date field renamed to date-input * feat(date-picker): date input completed * chore(date-input): commented code removed

Merge branch 'main' of github.com:nextui-org/nextui into v.2.3.0

ec0679d

Merge branch 'main' of github.com:nextui-org/nextui into v.2.3.0

c69b2e6

TimeInput Component 🕒 (#2672)

d94ba24

* feat(time-input): time input added with some stories, tests and date-picker integration missing * feat(time-input): tests added, date-picker integration added, missing stories added

chore(react): missing packages added

e736d4a

chore(time-input): fix stories names

0b72e17

fix(time-input): time value type

0f7c71e

fix: date-picker visibleMonth width does not get widen enough (#2703)

e58b0aa

fix(range-calendar): styles

c0131c4

Merge branch 'main' of github.com:nextui-org/nextui into v.2.3.0

d07623d

Merge branch 'main' of github.com:nextui-org/nextui into v.2.3.0

ade636f

Merge branch 'main' of github.com:nextui-org/nextui into v.2.3.0

9766085

wingkwong and others added 20 commits April 15, 2024 15:55

fix(checkbox): prettier

fb058b1

fix(docs): incorrect cli api references link

05f8808

fix: only two keyframes currently supported with spring and inertia a…

85ffbd2

…nimations (#2596) * chore(deps): bump framer-motion * feat(changeset): fixed framer motion issue * chore(changeset): revise changeset message * chore(deps): update pnpm-lock.yaml

Merge branch 'main' of github.com:nextui-org/nextui into v.2.3.0

c48e8ca

chore(docs): routes

590f7ca

chore(core): merged with main

7c1d11f

fix(select): only trigger setSelectedKeys when domRef.current.value i…

4a00326

…s true (#2722)

chore(docs): blog changes (#2724)

25120be

* chore(docs): blog changes * feat(docs): blog improved * chore(blog): draft param added

chore: version changeset added

340d00f

feat(blog): v2.3.0 almost done

dfb8edd

chore(theme): fix merge conflicts

96ada02

chore(docs): tailwind colors updated, calendar overflow fixed

eac8c71

chore(blog): add presets demo

9f135ee

fix(calendar): overflow on windows

7a9d000

chore(docs): improve popover placements demo

f64b0dc

fix(input): input box shifts upwards atfer adding the errorMessage

cccdd52

wingkwong requested a review from jrgarciadev as a code owner April 16, 2024 09:12

vercel bot deployed to Preview – nextui-storybook-v2 April 16, 2024 09:15 View deployment

vercel bot deployed to Preview – nextui-docs-v2 April 16, 2024 09:18 View deployment

Base automatically changed from v.2.3.0 to main April 16, 2024 12:25

wingkwong marked this pull request as draft April 16, 2024 12:42

wingkwong changed the base branch from main to canary April 28, 2024 14:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(input): input box shifts upwards after adding the errorMessage #2732

fix(input): input box shifts upwards after adding the errorMessage #2732

wingkwong commented Apr 16, 2024 •

edited

linear bot commented Apr 16, 2024

changeset-bot bot commented Apr 16, 2024

coderabbitai bot commented Apr 16, 2024

Auto Review Skipped

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

vercel bot commented Apr 16, 2024 •

edited

fix(input): input box shifts upwards after adding the errorMessage #2732

Are you sure you want to change the base?

fix(input): input box shifts upwards after adding the errorMessage #2732

Conversation

wingkwong commented Apr 16, 2024 • edited

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

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

📝 Additional Information

linear bot commented Apr 16, 2024

changeset-bot bot commented Apr 16, 2024

🦋 Changeset detected

coderabbitai bot commented Apr 16, 2024

Auto Review Skipped

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

vercel bot commented Apr 16, 2024 • edited

wingkwong commented Apr 16, 2024 •

edited

CodeRabbit Configration File (`.coderabbit.yaml`)

vercel bot commented Apr 16, 2024 •

edited