[giaBaoJS]

🔗 Linked issue

Resolves #4612

❓ 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

The @error example in the Form docs scrolls to the first invalid field but never focuses it. With loadingAuto (on by default), onSubmitWrapper sets loading before validating, so every field is rendered disabled while validation runs. error is emitted from the catch block, before the finally that resets loading, so the handler runs while the inputs are still disabled in the DOM and focus() does nothing.

loading is now reset and the DOM flushed with nextTick() before error is emitted, so the fields are enabled again when the handler runs. Focus is still left to the handler; this only makes the existing example work. The success path is unchanged.

#6547 went at this with a focusOnError prop and was closed because focusing by default changes every existing form. This doesn't move focus at all, it only makes the handler from the docs work as written.

The new test reads the inputs' disabled state from inside the error handler. It sees [true, true] on v4 and [false, false] with this change.

📝 Checklist

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ui	Ready	Preview	Oct 16, 2026 12:13pm UTC
ui-repl	Ready	Preview	Oct 16, 2026 12:13pm UTC

[github-actions]

Client output of the apps in test/bundle that changed, compared to the base branch.

Fixture	JS (gzip)	CSS (gzip)
nuxt-full	893.3 kB (+4 B, +0.0%)	28.4 kB

Raw sizes

Fixture	JS	CSS
nuxt-full	2807.8 kB (+21 B, +0.0%)	204.9 kB

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 12b8bc03-3027-491e-954b-0d3b0381e69a

📥 Commits

Reviewing files that changed from the base of the PR and between 4629ed4 and a63b2e4.

📒 Files selected for processing: 2

• src/runtime/components/Form.vue
• test/components/Form.spec.ts

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

📝 Walkthrough

When form submission fails with FormValidationException, Form.vue clears loading and waits for Vue’s next update tick before emitting the error event. A regression test checks that both inputs are enabled when the error callback runs.

Priority: ⬇️ Low

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

Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to a63b2

Validation failures now re-enable auto-disabled inputs before the error handler runs, allowing handlers to focus them. The added test checks their callback-time state; no actionable merge-blocking risk is apparent.

Pre-merge checks: 5

Check name	Status	Explanation
Description check		The description clearly explains the Form error-path fix, the disabled-field behavior, the use of nextTick(), and the added test.
Title check		The title concisely and accurately describes the main change: re-enabling form fields before emitting the error event.
Linked Issues check		The PR addresses #4612. In src/runtime/components/Form.vue, the validation-error path sets loading.value = false, waits for nextTick(), and then emits error. This re-enables the form fields be…
Out of Scope Changes check		The changes are limited to the Form error path and a focused regression test. The test directly verifies the behavior required by #4612. No unrelated product behavior or unrelated files are included i…
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…

Full details: Linked Issues check

Explanation

The PR addresses #4612. In src/runtime/components/Form.vue, the validation-error path sets loading.value = false, waits for nextTick(), and then emits error. This re-enables the form fields before the existing error handler runs, so the handler can focus the invalid element. The added Form test verifies that both inputs are enabled inside the error callback. The PR does not add automatic focus, which matches the stated issue objective.

Full details: Out of Scope Changes check

Explanation

The changes are limited to the Form error path and a focused regression test. The test directly verifies the behavior required by #4612. No unrelated product behavior or unrelated files are included in the reviewed changes.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@7217

commit: a63b2e4

[codspeed]

Merging this PR will not alter performance

✅ 31 untouched benchmarks
⏩ 10 skipped benchmarks¹

---

_{Comparing giaBaoJS:fix/form-error-focus (a63b2e4) with v4 (4629ed4)}

Footnotes

1. 10 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩