zurb / tribute

ES6 Native @mentions
https://zurb.github.io/tribute/example/
MIT License
2.04k stars 305 forks source link

IE11 - Issues with contenteditable #213

Open kein-b opened 5 years ago

kein-b commented 5 years ago

In IE11

  1. The @ mention only works fine on the 1st mention, succeeding mentions will no longer trigger.
  2. Moving the cursor on the beginning of the mention will make the whole element unresponsive to input.

These bugs can be replicated on the demo page and our app which uses version 3.6.0 https://zurb.github.io/tribute/example/

Issue 1 tributejs-ie11

Issue 2 tributejs-ie11-2

ashwin1014 commented 5 years ago

i'm facing this issue too. Does not work on typing '@' for the second time. Below is a video showing the issue. Tested version 3.6.0. & 3.5.3 ZURB Tribute _ Demo - Internet Explorer 2019-03-05 14-28-21.zip

pleunv commented 5 years ago

Running into the same issue. Slowly trying to figure out (man, IE debugging is awful) and I'm running into a weird quirk with window.getSelection() in IE10/IE11. The first time it gets triggered in a paragraph it returns the text node as anchorNode, as it should... However, upon any subsequent triggers it returns the parent HTMLParagraphElement instead which in its textContent also contains the previous tribute element's <span> in addition to the second trigger char, i.e. "John Doe @" instead of just " @", breaking all further trigger parsing.

I'm honestly not really sure how to fix this.

pleunv commented 5 years ago

Funnily enough, if you add an empty html element at the end of your selectTemplate it seems to work around the issue and window.getSelection() goes back to selecting the text node in IE. Something like

selectTemplate: `<span class="fr-deletable fr-tribute">${item.original.name}</span><span />`
Coru89 commented 4 years ago

@ashwin1014 @pleunv - i'm facing this issue as well. Did either of you get this sorted? The workaround doesnt seem to work for me.

pleunv commented 4 years ago

Still using my workaround mentioned above I'm afraid.