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.