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

[rdjanuar]

🔗 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]

📝 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 accurately describes the main bug fix: the parent form not becoming dirty when nested fields change.
Description check	✅ Passed	The description links to the relevant issue (#5144) and identifies the change as a bug fix, though implementation details are minimal.
Linked Issues check	✅ Passed	The pull request directly addresses issue #5144 by implementing logic to reflect nested form dirty state in the parent form's exposed dirty property.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the nested form dirty state propagation: modified the dirty computed property and added a test covering the specific issue.
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

---

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

[pkg-pr-new]

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

commit: ab758a9

[benjamincanac]

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

[rdjanuar]

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

[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

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Await the change trigger to avoid async test flakiness.

On Line 576, trigger('change') should be awaited. Without it, event dispatch and Vue reactivity scheduling can race with flushPromises() in CI.

Suggested fix

-      nestedInput.trigger('change')
+      await nestedInput.trigger('change')
       await flushPromises()

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	nestedInput.trigger('change')
	await flushPromises()
	await nestedInput.trigger('change')
	await flushPromises()

🤖 Prompt for 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.

In `@test/components/Form.spec.ts` around lines 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.