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

LordSalmon · 2025-12-12T16:58:48Z

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 · 2025-12-12T16:58:58Z

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

_{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.

The current approach grants support for nested shadow doms

LordSalmon · 2025-12-14T09:28:33Z

@coderabbitai review

coderabbitai · 2025-12-14T09:28:41Z

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

github-actions · 2025-12-15T01:25:31Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	103 kB (+63 B)	39 kB (+22 B)	35.2 kB (+49 B)
vue.global.prod.js	161 kB (+63 B)	59 kB (+17 B)	52.5 kB (-71 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47 kB	18.3 kB	16.8 kB
createApp	55.1 kB	21.4 kB	19.6 kB
createSSRApp	59.4 kB	23.2 kB	21.1 kB
defineCustomElement	60.7 kB	23.1 kB	21.1 kB
overall	69.4 kB	26.6 kB	24.3 kB

pkg-pr-new · 2025-12-15T01:25:39Z

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14196

npm i https://pkg.pr.new/@vue/compiler-core@14196

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14196

npm i https://pkg.pr.new/@vue/compiler-dom@14196

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14196

npm i https://pkg.pr.new/@vue/compiler-sfc@14196

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14196

npm i https://pkg.pr.new/@vue/compiler-ssr@14196

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14196

npm i https://pkg.pr.new/@vue/reactivity@14196

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14196

npm i https://pkg.pr.new/@vue/runtime-core@14196

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14196

npm i https://pkg.pr.new/@vue/runtime-dom@14196

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14196

npm i https://pkg.pr.new/@vue/server-renderer@14196

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14196

npm i https://pkg.pr.new/@vue/shared@14196

yarn add https://pkg.pr.new/@vue/[email protected]

vue

pnpm add https://pkg.pr.new/vue@14196

npm i https://pkg.pr.new/vue@14196

yarn add https://pkg.pr.new/[email protected]

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14196

npm i https://pkg.pr.new/@vue/compat@14196

yarn add https://pkg.pr.new/@vue/[email protected]

commit: acebcdd

edison1105 · 2025-12-15T01:35:13Z

/ecosystem-ci run

vue-bot · 2025-12-15T01:41:37Z

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
primevue	✅ success	✅ success
radix-vue	✅ success	✅ success
pinia	✅ success	✅ success
nuxt	✅ success	✅ success
quasar	✅ success	✅ success
router	✅ success	✅ success
vue-macros	❌ failure	❌ failure
vue-i18n	❌ failure	❌ failure
vant	✅ success	✅ success
vueuse	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vuetify	❌ failure	❌ failure
test-utils	✅ success	✅ success
vitepress	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success
language-tools	❌ failure	❌ failure

edison1105 · 2025-12-15T02:05:08Z

Thanks for the PR. LGTM.

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.

Try adding an e2e test in packages/vue/__tests__/e2e/vModel.spec.ts

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

287ae18

coderabbitai bot reviewed Dec 12, 2025

View reviewed changes

fix(v-model.trim): improve on previous approach

acebcdd

The current approach grants support for nested shadow doms

edison1105 added scope: v-model 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. need test The PR has missing test cases. labels Dec 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

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

LordSalmon commented Dec 12, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Dec 12, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

LordSalmon commented Dec 14, 2025

Uh oh!

coderabbitai bot commented Dec 14, 2025

Uh oh!

github-actions bot commented Dec 15, 2025

Uh oh!

pkg-pr-new bot commented Dec 15, 2025

Uh oh!

edison1105 commented Dec 15, 2025

Uh oh!

vue-bot commented Dec 15, 2025

Uh oh!

edison1105 commented Dec 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

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

Are you sure you want to change the base?

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

Conversation

LordSalmon commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue:

Fix idea:

Tests:

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

LordSalmon commented Dec 14, 2025

Uh oh!

coderabbitai bot commented Dec 14, 2025

Uh oh!

github-actions bot commented Dec 15, 2025

Size Report

Bundles

Usages

Uh oh!

pkg-pr-new bot commented Dec 15, 2025

Uh oh!

edison1105 commented Dec 15, 2025

Uh oh!

vue-bot commented Dec 15, 2025

Uh oh!

edison1105 commented Dec 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

LordSalmon commented Dec 12, 2025 •

edited

Loading

coderabbitai bot commented Dec 12, 2025 •

edited

Loading