council icon indicating copy to clipboard operation
council copied to clipboard

@mention VueJs post error

Open rixgov opened this issue 6 years ago • 2 comments

When you attempt to ONLY @mention a user and post it, only the @symbol is posted. Take a look at the VueJs NewReply component in VueJs DevTools in Chrome which shows that only the @ symbol is being submitted. What's more weird is that upon another keystroke, after you have selected a user to @mention, the entire username now fills in on the VueJs Component.

Steps to reproduce:

  1. Navigate to any thread page and scroll down to bottom for new reply textarea
  2. Open chrome Devtools and bring up the NewReply component, watch the body field
  3. In the new reply box type "@" and select a user (1 keystroke and 1 click)
  4. Without any other keystrokes/clicks, notice what is typed in the textbox and what the NewReply.vue body field shows.

Anybody have any idea how to fix that? Thanks!

rixgov avatar Mar 20 '18 12:03 rixgov

Have the same issue

GarethCott avatar Apr 03 '18 12:04 GarethCott

I have seem to have found some insight into this issue... its a Jquery vs VueJs problem. I has to do with the fact that JQuery is added the @mention to actual DOM and VueJs is inspecting the virtual DOM.

// Here is what seems to be a similar issue with a date picker https://stackoverflow.com/questions/39873898/observe-change-in-vue-js-model-when-input-updated-by-javascript-function

// One option seems to be to wrap it, I have tried and failed, can anybody help? https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

// Other option is to use this plugin instead https://github.com/fritx/vue-at

Any help or thoughts are much appreciated. Thanks!

rixgov avatar May 30 '18 00:05 rixgov