Cheers everyone

Issue:

The issue is, that usingv-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 thevalue 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 bethat 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 whetherdocument.activeElement is the root node for a shadow dom and if so, return theactiveElement of the shadow dom.

Improvement: To support nested shadow doms,el.getRootNode() is used to directly verify theactiveElement 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.}