fix(Form): parent not getting dirty after nested field is changed by rdjanuar · Pull Request #6545 · nuxt/ui

rdjanuar · 2026-06-03T13:13:15Z

🔗 Linked issue

Resolves #5144

❓ 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

📝 Checklist

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

coderabbitai · 2026-06-03T13:17:26Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5bd037a7-e6c0-4e31-b72c-e54004cf3c39

📥 Commits

Reviewing files that changed from the base of the PR and between 8215897 and 1f1de6b.

📒 Files selected for processing (2)

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

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

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

📝 Walkthrough

Walkthrough

This PR updates the Form component's dirty computed property to propagate nested form dirty states to the parent form. Previously, the dirty API only checked local field changes; now it also evaluates whether any attached nested form reports itself as dirty. A corresponding test validates that modifying a nested field correctly updates the parent form's dirty status.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically identifies the main issue being fixed: parent form not becoming dirty when nested fields change.
Description check	✅ Passed	The description links to the relevant GitHub issue (`#5144`) and identifies the change as a bug fix, providing context for the fix.
Linked Issues check	✅ Passed	The code changes fully address the requirement from issue `#5144`: the modified `dirty` computed property now reflects nested form dirty states alongside local dirty fields.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the nested form dirty state propagation issue; no unrelated modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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.

ESLint install timed out. The project may have too many dependencies for the sandbox.

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 and usage tips.}

pkg-pr-new · 2026-06-03T13:25:16Z

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

commit: 2701a8d

benjamincanac · 2026-06-04T09:56:00Z

+    if (dirtyFields.size > 0) return true
+
+    for (const form of nestedForms.value.values()) {
+      if ((form.api.dirty as any).value) return true


Do we really need this as any cast? 🤔

Suggested change

if ((form.api.dirty as any).value) return true

if (form.api.dirty.value) return true

yes somehow dirty field doesnt infering type ComputedRef. i think i can casting the type to be as unknown as ComputedRef<boolean> instead of any

…ix/form-dirty-fields

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@test/components/Form.spec.ts`:
- Around line 576-577: The test is triggering a change event without awaiting
it, which can cause async flakiness; update the test so the call to
nestedInput.trigger('change') is awaited (i.e., use await
nestedInput.trigger('change')) before calling flushPromises() to ensure the
event is fully dispatched and Vue reactivity runs; locate the trigger call on
the nestedInput element in the Form.spec.ts test and add the await.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1bac78ba-b8db-44f8-8d2d-3ad8bc17d659

📥 Commits

Reviewing files that changed from the base of the PR and between 540ebc7 and 8215897.

📒 Files selected for processing (2)

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

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

src/runtime/components/Form.vue

…it trigger events in tests

fix(Form): parent not getting dirty after nested field is changed

4a85b3e

rdjanuar requested a review from benjamincanac as a code owner June 3, 2026 13:13

github-actions Bot added the v4 #4488 label Jun 3, 2026

vercel Bot deployed to Preview – ui June 3, 2026 13:31 View deployment

vercel Bot deployed to Preview – ui June 3, 2026 17:08 View deployment

benjamincanac reviewed Jun 4, 2026

View reviewed changes

up

ab758a9

rdjanuar force-pushed the fix/form-dirty-fields branch from 027f153 to ab758a9 Compare June 4, 2026 10:02

rdjanuar requested a review from benjamincanac June 4, 2026 10:03

rdjanuar and others added 2 commits June 4, 2026 17:03

Merge branch 'v4' into fix/form-dirty-fields

8215897

Merge branch 'fix/form-dirty-fields' of github.com:rdjanuar/ui into f…

817747d

…ix/form-dirty-fields

coderabbitai Bot reviewed Jun 4, 2026

View reviewed changes

Comment thread test/components/Form.spec.ts

vercel Bot deployed to Preview – ui June 4, 2026 10:16 View deployment

refactor(Form): simplify dirty state access in Form component and awa…

1f1de6b

…it trigger events in tests

vercel Bot deployed to Preview – ui June 12, 2026 14:45 View deployment

Merge branch 'v4' into fix/form-dirty-fields

2701a8d

vercel Bot deployed to Preview – ui June 12, 2026 15:06 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(Form): parent not getting dirty after nested field is changed#6545

fix(Form): parent not getting dirty after nested field is changed#6545
rdjanuar wants to merge 6 commits into
nuxt:v4from
rdjanuar:fix/form-dirty-fields

rdjanuar commented Jun 3, 2026

Uh oh!

coderabbitai Bot commented Jun 3, 2026 •

edited

Loading

Walkthrough

Estimated code review effort

Uh oh!

pkg-pr-new Bot commented Jun 3, 2026 •

edited

Loading

Uh oh!

benjamincanac Jun 4, 2026

Uh oh!

rdjanuar Jun 4, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	if ((form.api.dirty as any).value) return true
	if (form.api.dirty.value) return true

Conversation

rdjanuar commented Jun 3, 2026

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

Uh oh!

coderabbitai Bot commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Uh oh!

pkg-pr-new Bot commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

benjamincanac Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

rdjanuar Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

coderabbitai Bot commented Jun 3, 2026 •

edited

Loading

pkg-pr-new Bot commented Jun 3, 2026 •

edited

Loading

rdjanuar Jun 4, 2026 •

edited

Loading