Skip to content

fix(Input, Textarea): keep 0 with the nullable and optional modifiers - #6871

Open
giaBaoJS wants to merge 1 commit into
nuxt:v4from
giaBaoJS:fix/input-textarea-nullable-optional-zero
Open

fix(Input, Textarea): keep 0 with the nullable and optional modifiers#6871
giaBaoJS wants to merge 1 commit into
nuxt:v4from
giaBaoJS:fix/input-textarea-nullable-optional-zero

Conversation

@giaBaoJS

Copy link
Copy Markdown

🔗 Linked issue

Resolves #5950

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Input and Textarea mapped empty values with ||=:

if (props.modelModifiers?.nullable) {
  value ||= null
}

||= fires on every falsy value, so combined with the number modifier (or type="number" on Input) a typed 0 went through looseToNumber('0')0 and then 0 ||= nullnull. .optional had the same problem and produced undefined. Both are the case @sandros94 described in the issue.

??= is not the fix: Input and Textarea must still map '', which ??= would leave untouched. The mapping is now driven by an explicit emptiness test, so '', null and undefined behave exactly as before and only falsy numbers change:

const isEmpty = value === '' || value === null || value === undefined

Select, SelectMenu, InputMenu and Listbox already use ??=, which is right for them — their value is an option, not a typed string — so they are untouched.

Nine table-driven rows added across Input.spec.ts and Textarea.spec.ts, covering both the 0 cases and the '' cases that must not regress. Reverting only the component change turns the five 0 rows red in both the nuxt and vue projects, while the '' rows stay green.

📝 Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

`||=` fires on every falsy value, so with the `number` modifier (or
`type="number"` on Input) a typed `0` was turned into `null` or
`undefined` before it reached the model.

Map only genuinely empty values instead. `''` still becomes `null` or
`undefined`, which is why `??=` is not the right operator here.
@github-actions github-actions Bot added the v4 #4488 label Aug 23, 2026
@coderabbitai

coderabbitai Bot commented Aug 23, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b7c4b1af-3caa-417d-afc9-0a8746c72c66

📥 Commits

Reviewing files that changed from the base of the PR and between aa5f4af and 991578e.

📒 Files selected for processing (4)
  • src/runtime/components/Input.vue
  • src/runtime/components/Textarea.vue
  • test/components/Input.spec.ts
  • test/components/Textarea.spec.ts

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.


📝 Walkthrough

Walkthrough

Input and Textarea now detect empty values explicitly before applying nullable or optional model modifiers. Numeric zero and other non-empty falsy values remain unchanged. Tests cover optional and nullable combinations with the number modifier, including conversion of empty input to null or undefined.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 99157

This localized fix preserves typed zero values while retaining existing empty-value behavior in Input and Textarea, with regression coverage; no actionable merge-blocking risk remains after normal checks and review.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the fix to preserve numeric 0 with nullable and optional modifiers in Input and Textarea.
Description check ✅ Passed The description accurately explains the bug, the fix, and the added regression tests.
Linked Issues check ✅ Passed The changes satisfy issue #5950 by preserving 0 while retaining empty-value mapping and adding coverage for both behaviors.
Out of Scope Changes check ✅ Passed All component and test changes directly support the linked issue and stated pull request objectives.
Docstring Coverage ✅ Passed Docstring check was indeterminate for this PR — some files could not be analyzed in time. Not blocking.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/runtime/components/Input.vue

Parsing error: Unexpected token )

src/runtime/components/Textarea.vue

Parsing error: Unexpected token )

test/components/Input.spec.ts

Parsing error: Unexpected token {

  • 1 others

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@codspeed-hq

codspeed-hq Bot commented Aug 23, 2026

Copy link
Copy Markdown

Merging this PR will not alter performance

✅ 31 untouched benchmarks


Comparing giaBaoJS:fix/input-textarea-nullable-optional-zero (991578e) with v4 (aa5f4af)

Open in CodSpeed

@pkg-pr-new

pkg-pr-new Bot commented Aug 23, 2026

Copy link
Copy Markdown
npm i https://pkg.pr.new/@nuxt/ui@6871

commit: 991578e

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UInput: nullable and optional modelModifiers turn any falsy value to null/undefined

2 participants