fix(v-model.trim): correct the activeElement discovery for shadow DOM

[LordSalmon]

Cheers everyone

Issue:

The issue is, that using v-model.trim in the shadow dom does not behave the same as in the light dom. When an input should get trimmed in the light dom, the ref value itself gets trimmed correctly, but the displayed characters in the input won't get trimmed until you refocus the input. I like that approach since it reduces noise for the cursor and doesn't seem glitchy. However, when trimming in the shadow dom, the displayed characters (not equivalent to the value property of the input element at that moment!) are trimmed, which increases visual noise.

A demo with reproduction steps can be seen here: https://vue-3-v-model-trim-misbehaviour.vercel.app/
With the repository: https://github.com/LordSalmon/vue-3-v-model-trim-misbehaviour

The problem seems to be that line which compares the currently focused element to the activeElement of the document. However, when the input is placed inside the shadow dom, document.activeElement returns the shadow dom root node instead of the input.

Fix idea:

Initial Idea: - Checking at that point of execution whether document.activeElement is the root node for a shadow dom and if so, return the activeElement of the shadow dom.

Improvement: To support nested shadow doms, el.getRootNode() is used to directly verify the activeElement property from that root instead of starting at the root of the root document itself.

Tests:

I tried to create a test for that, but it seems as if js-dom's focus api is not entirely consistent. Reproducing the step where the displayed characters in the input still contained the spaces but were gone on refocus was not possible. But If someone has a flash of inspiration, let me know or feel free to contribute.

Summary by CodeRabbit

• Bug Fixes
  • Improved focus detection for v-model so it correctly respects shadow DOM boundaries and excludes range inputs, preserving existing lazy/trim/number behaviors.
  • No changes to public API or exported signatures.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Replace the direct document.activeElement === el check in vModelText.beforeUpdate with a root-aware focus resolution that uses el.getRootNode() and only considers rootNode.activeElement === el when rootNode is a Document or ShadowRoot, also excluding el.type === 'range'. No exported signatures changed.

Changes

Cohort / File(s)	Summary
vModel focus handling packages/runtime-dom/src/directives/vModel.ts	Replace direct document.activeElement === el check with root-aware resolution using el.getRootNode(); consider Document or ShadowRoot roots and ensure rootNode.activeElement === el and el.type !== 'range'; preserve existing lazy/trim/number and early-return logic

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Single-file change with focused logic tweak.
• Review attention:
  • Verify focus resolution across Shadow DOM boundaries and nested shadow roots.
  • Confirm el.type !== 'range' exclusion is preserved and correct.
  • Ensure interaction with lazy/trim/number branches and early-return conditions remains unchanged.

Poem

🐰 I peeked beneath the shadowed dome,
Where focused leaves once lost their home,
I nudge the root, I call it right,
So active fields regain their light,
A tiny hop to fix the roam.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: fixing activeElement discovery for Shadow DOM in v-model.trim behavior.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/runtime-dom/src/directives/vModel.ts (1)

54-58: Harden activeElement() for null inner activeElement + nested shadow roots

Right now, if document.activeElement.shadowRoot exists but shadowRoot.activeElement is null, the helper returns null instead of falling back to the document’s active element. Also, nested shadow roots won’t be fully resolved.

Consider:

-function activeElement() {
-  return document.activeElement && document.activeElement.shadowRoot
-    ? document.activeElement.shadowRoot.activeElement
-    : document.activeElement
-}
+function activeElement(): Element | null {
+  let el: Element | null = document.activeElement
+  while (el && el.shadowRoot?.activeElement) {
+    el = el.shadowRoot.activeElement
+  }
+  return el
+}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f51d3e2 and 287ae18.

📒 Files selected for processing (1)

• packages/runtime-dom/src/directives/vModel.ts (2 hunks)

🔇 Additional comments (1)

packages/runtime-dom/src/directives/vModel.ts (1)

111-119: Good focus detection fix for Shadow DOM; please add a regression test (likely e2e)

Using activeElement() here matches the intended “don’t clobber the user’s in-progress text while focused” behavior in shadow trees. The remaining risk is regression without coverage, and jsdom focus behavior is known to be flaky for shadow DOM.

[LordSalmon]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.