EJS Mention issue in Vue - Unwanted mention character persistence

[Ricardo Lans]

Hello,

I've encountered a problem integrating EJS Mention with Vue. Specifically, when I use the mention trigger character ("/") and then select an option by pressing Enter, the selection behaves unexpectedly. The mention character remains visible one line above the selected mention, which is not the intended outcome. I attempted to address this by setting showMentionChar to false, yet this adjustment failed to resolve the issue.

Curiously, the functionality performs as anticipated when I make a selection using the Tab key. However, the problem persists when confirming selections through Enter or mouse clicks.

This issue arises within a project where EJS Mention is utilized alongside the EJS Rich Text Editor.

Any insights or solutions to rectify this discrepancy would be greatly appreciated.

Code:

  <div>

    <ejs-richtexteditor

      id="rte1"

      v-model="body"

      :toolbarSettings

      locale="nl-NL"

      :height="height || '400px'"

    ></ejs-richtexteditor>

    <ejs-mention id='defaultMention'

                  target='#rte1'

                  :dataSource='userData'

                  mentionChar='/'

                  suffixText='&nbsp;'

                  :fields="{ text: 'name', value: 'slug' }"

                  :displayTemplate="'dTemplate'"

                  :itemTemplate="'iTemplate'"

                  >

      <template v-slot:iTemplate="{data}">

        <div>

          <div class="title">{{ data.name }}</div>

          <div class="description">{{ data.description }}</div>

        </div>

      </template>

      <template v-slot:dTemplate="{data}">

        <span :data-variable="data.slug" onclick="this.parentElement.remove()">

          {{ data.name }}<span class="e-mention-chip-close e-icons e-close"></span>

        </span>

      </template>

    </ejs-mention>

  </div>

EXAMPLE:
Select 'aanhef' with enter

 

 Often results in:

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

But I expect this (works when using TAB):

[Kokila Poovendran]

Hi Ricardo Lans,

Thank you for reaching out to Syncfusion support.

We understand the inconvenience you're facing while integrating EJS Mention with Vue.js, particularly regarding the unexpected behavior when selecting a mention option using the Enter key. We appreciate you providing detailed information and code snippets to help us understand the issue better.

Upon reviewing your concern, we attempted to replicate the issue on our end using the provided code snippets. However, we were unable to encounter the mentioned behavior.

To assist you further, could you please provide a bit more information or modify the provided sample to replicate the issue consistently? Additionally, sharing the versions of EJS Mention, Vue.js, and any other related libraries you're using would be helpful for our investigation.

In the meantime, you can find a sample that we've prepared based on the provided code snippets here:  https://stackblitz.com/edit/z1mylh-99mevt?file=src%2FApp.vue

Once we have the necessary details from your end, we'll promptly work on providing you with a solution to address the discrepancy you've encountered.

Thank you for your patience and cooperation.

[Ricardo Lans]

Hello Kokila,

I'm currently running the following versions:
- vue: 3.4.15
- ej2-vue-richtexteditor: 24.2.3
- ej2-vue-dropdowns: 24.2.3

I also have some sample data for the datasource userData:

const userData = [

  { name: 'Voornaam', slug: '{{ voornaam }}', description: 'Tekst voornaam' },

  { name: 'Achternaam', slug: '{{ achternaam }}', description: 'Boeh achternaam' },

  { name: 'Reservering link', slug: '{{ reservering_link }}', description: 'Hier een omschrijving over reservering link' },

];

[Kokila Poovendran]

Hi Ricardo Lans,

Thank you for providing detailed information about the issue you're experiencing with EJS Mention in Vue. We've thoroughly investigated the problem and were able to replicate it on our end successfully. We pleased to inform you that this issue has been resolved in version 24.2.8. Therefore, we highly recommend upgrading to this version to resolve the problem.

To further assist you, we've prepared a sample demonstrating the resolution of the reported issue. You can access the sample via the following link: https://stackblitz.com/edit/z1mylh-uhgctq?file=package.json,src%2FApp.vue,src%2Fdata-source.json

Additionally, we've created a video illustration for your reference:

We hope this resolves your concern. If you need any further assistance or have any other questions, please feel free to reach out to us.

[Ricardo Lans]

Hello Kokila,

We have upgraded to this version and it fixed the problem. 

Thank you for your time and help.