fritx / vue-at

At.js for Vue.
https://fritx.github.io/vue-at/
MIT License
532 stars 114 forks source link

Caret is out of position #143

Open dvdhoek opened 2 years ago

dvdhoek commented 2 years ago

When using custom slots the caret moves to the wrong place.

image

When I continue typing it goes back to the correct place, right after where I pressed enter. Is this a known issue and is there a fix for it? The code that I'm using:

<section>
    <at :members="organisationDetails.users" name-key="firstName">
        <template slot="item" slot-scope="s">
             <img :src="s.item.avatar" />
             <span class="tag" v-text="s.item.firstName"></span>
        </template>
        <template slot="embeddedItem" slot-scope="s">
            <span><span class="tag" v-text="s.current.firstName"></span></span>
        </template>
        <div class="editor" contenteditable v-html="html"></div>
      </at>
</section>
yurii-mamchur commented 2 years ago

I have same issue! @dvdhoek @fritx any updates on this?

fritx commented 2 years ago

Could you provide a minimal repo or more code? @dvdhoek @yurii-mamchur

Is it related to some specific browsers?

yurii-mamchur commented 2 years ago

@fritx it doesn't work in Chrome only. Reprodusable in any case then you use embeddedItem slot

 <template slot="embeddedItem" slot-scope="s">
      <span><span class="tag" v-text="s.current.firstName"></span></span>
  </template>

same issue here

it happends because embeddedItem has contenteditable='false' if its true everything works as expected.

To fix it you probably should add <br /> to the end of <div contenteditable>