Empty text node at the start and the end of the element

[anatoliilitvinovr]

Intro

Hey!
In Vue, every array of nodes (elements) is wrapped by an empty text node at the start and the end so that Vue can place these elements in it.

Here is a short code snippet to reproduce this:

const arr = ['a', 'b', 'c'];

const List = defineComponent({
  render() {
    return arr.map(char => <div>{char}</div>);
  },
});

export default defineComponent({
  mounted() {
    console.log((this.$refs['root-ref'] as any).childNodes);
  },
  render() {
    return (
      <div ref="root-ref">
        <List />
      </div>
    );
  },
});

In the console, you will see something like this:

The problem

I need to get the current document selection via the "selection change" DOM Event after the "cmd+left"/"cmd+right" hotkey combo is fired. The "cmd+left"/"cmd+right" hotkey makes the cursor move to the start/end of the line where the cursor is.

Here is a catch: when you do "cmd+left"/"cmd+right" the cursor will move to the first/last "#text" node, which is added by Vue but is not expected for me. (I expect that selection will move to the first/last "#text" node, which is in one of the "div" nodes)

As I tested, no other Web Framework (React, Angular, Solid) does the same.

Do you know how to manage this? Maybe there is a way available to prevent the creation of these "#text" nodes? Any ideas?

[jh-leong]

Those empty text nodes are fragment anchors used by Vue to manage fragments.

In your case, the List component has multiple root elements, resulting in a fragment. You can avoid this by wrapping the mapped elements in a single root node: Playground

[anatoliilitvinovr]

Yes, I know this, but I can't follow your example in my app because the simple List component here is the hard tree component in my app. Playground

[jacekkarczmarczyk]

Can't you use children instead of childNodes?

[anatoliilitvinovr]

@jacekkarczmarczyk

I think not. I put childNodes here to make clear how it renders.

Actually the document.getSelection() returns me an fragment anchor after "cmd+left"/"cmd+right" hotkey fire