Cursor position seems wrong after an item is selected

[sam26880]

After typing @ and selecting a user from the list, the cursor doesn't seem to be in the right position.

Please see my video below to understand what's happening https://www.loom.com/share/853d1ad474374469b1250be4a0bef9d8

I need an extra space after the selection has been made for the cursor to be in the right position.

Hopefully it's clear from my video what the issue is.

[fritx]

@sam26880 yes it is clear, and

https://github.com/fritx/vue-at#custom-tags

<span slot="embeddedItem" slot-scope="s">
  <span class="tag"><img :src="s.current.avatar">{{ s.current.name }}</span>
</span>

<!-- with Vue 2.6+ 'v-slot' directive -->
<!-- note at least two '<span>' wrapper are required to work -->
<template v-slot:embeddedItem="s">
  <span><span class="tag"><img class="avatar" :src="s.current.avatar">{{ s.current.name }}</span></span>
</template>

1. "note at least two '' wrapper are required to work", did you provide two nested spans?
2. could you pls share your code?

[sam26880]

Thanks for your response.

Looks like I do have multiple SPANs

<div class="ToDo">
    <ErrorDisplay/>
    <at at="#" :members="patients" name-key="Patient" v-if="patients" ref="patientat" @click="test">
      <template v-slot:embeddedItem="s">
        <span>
          <span :data-teamio-patientid="s.current.PatNum" class="badge mr-xs badge-secondary badge-pill mt-1">
            <router-link :to="{ name: 'patientprofile', params: { patientID: siteID + '-' + s.current.PatNum }}">{{s.current.Patient}}</router-link>
          </span>
        </span>
      </template>
      <at at="@" :members="activeEmployees" name-key="Name" v-model="newTodoContent" v-if="employees" ref="empat" @click="test">
        <template slot="item" slot-scope="s">
          <span>{{s.item.Name}}</span>
        </template>
        <template slot="embeddedItem" slot-scope="s">
           <span>
              <span :data-teamio-employeeid="s.current.EmployeeID" class="badge mr-xs badge-primary badge-pill mt-1">{{s.current.Name + " "}}</span>
            </span>
        </template>
        <div class="ToDo__addNew newtodo" 
          id="newtodo"
          ref="newtodo"
          @input="onInput"
          placeholder="Add your task here...(use @ to assign the task to someone or # to tag a patient)" 
          contenteditable
          />
      </at>
    </at>
    <div>

[sam26880]

Any update here?