The Member List Can't Be Autocompleted in IE

[pingshunhuangalex]

Hi @fritx

It's me again.

After the latest update, everything seems to work perfectly in Chrome. However, when I'm doing some final testing on IE compatibility, it seems that the item in member list can't be autocompleted, regardless of using mouse cursor or pressing Enter. This issue can be reproducible in your doc example.

It would be nice if you can shed some light on this. Thanks.

[fritx]

Yes, I never tested it on IE, there might be bugs to fix xD

[pingshunhuangalex]

Hi @fritx I found the issue.

You are using document.execCommand - 'insertText' in here and here, which is no longer supported in IE (but only in edge now) https://msdn.microsoft.com/en-us/library/hh801231(v=vs.85).aspx#InsertText

Can you insert the text using an alternative method, either Vue v-model or using the old-school el.value += itemName(list[cur]) + ' ' kinda way? Thanks.

[fritx]

@pingshunhuangalex nice 👍 , but we have to insert the text right behind caret.

https://stackoverflow.com/questions/3398378/execcommand-inserthtml-in-internet-explorer

[pingshunhuangalex]

@fritx good catch, the updated the example from August 2013 did the trick (https://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div/6691294#6691294). Tested in IE and it works.

Will you be able to implement this any time soon?

[fritx]

@pingshunhuangalex try please: 😆

npm i -S "git+https://github.com/fritx/vue-at.git#fix/ie-build"

// use as before
import At from 'vue-at'
import At from 'vue-at/dist/vue-at-textarea.js'

[pingshunhuangalex]

Hi @fritx

I just tried the update above. It seems that the item can be selected now (at least the menu goes away when I click or press enter). However, the selected item is not inserted into the textarea, in both Chrome and IE. Can you have another look into it? Thanks.

[fritx]

@pingshunhuangalex I've tested it again with Microsoft Edge and IE. It should had worked in Edge and IE 9~11. (donno why not on your side 😕 )

ContentEditable: https://fritx.github.io/vue-at/#/en/quickstart Textarea: https://fritx.github.io/vue-at/#/en/textarea

I just merged the branch to 'dev' and updated the docs also, would be available in the next version release.

[pingshunhuangalex]

Thanks @fritx

Updated docs work fine on my side, I'll have another go once the next release is out. Thanks again.

[fritx]

@pingshunhuangalex hey, 2.3.0 is out, docs' been updated too: https://fritx.github.io/vue-at/#/en/textarea

I've tested it from IE 9 to 11, with both editable div and textarea. Seems it is fine except for a bug which has been fixed but not included in 2.3.0 yet, see it in the commit reference above.

[pingshunhuangalex]

Hi @fritx Thanks for the update. I just gave it a clean installation and test it out again, but the item is still not inserted into the textarea. Visually, it's like the selected text went onto the screen and instantly got deleted, so it's almost like a flash.

After some testing, I narrow down this to v-model. The current way of vue-at doesn't seem to work well with Vue's form two way binding, I need to change it to one way binding using @input and manually update value back to textarea when necessary, but I guess there is not much you can do on this?

Except that, everything is working as expected. Thanks and keep up the good work :)

[fritx]

@pingshunhuangalex hey, thanks for your feedback!

Yes, I guess vue-at cannot work well with v-model at the time, 'cause it mutates dom (inserting texts) directly, and interrupts the mvvm principle. lol

[pingshunhuangalex]

All good, thanks @fritx

I think the above gotcha ya moment should be mentioned in the documentation, so new users won't get lost on it.

[fritx]

Related PR: https://github.com/fritx/vue-at/pull/46 For a cross-browser zero-dependency library to insertText, pls check it out :D https://github.com/fritx/insert-text-2