Polyfill Not Working As Expected With Internet Explorer 11 (Mix Mode)

[BadRecordLength]

Prerequisites

• [✓] I am running the latest version
• [✓] I checked the documentation and found no answer
• [✓] I checked to make sure that this issue has not already been filed

Explanation

Firstly, thanks for making this great library. Unfortunately, I have run into a number of issues in Internet Explorer 11 that are not present in Chrome, even when using the polyfill script.

List of Discovered Problems:

• Tags are not being rendered correctly when added in IE, they are much larger than in chrome, taking up two lines (see below image) - I fixed this by manually overriding the .tagify__input class' whitespace CSS to have the property white-space: normal or white-space: nowrap.
• Tags are editable and resizable when they're not configured to be so - I think this is caused by the SVG polyfill but I'm not sure.
• The suggestion dropdown (position: "text") does not allow navigation using the down arrow key, it always reverts to the top suggestion (have tried with config settings highlightFirst: true and highlightFirst: false) - mouse selection does work though.
• Cannot add another tag directly after inserting a tag - this appears to be being caused by the caret position code, after typing a prefix and text the dropdown does not initially appear after a tag has already been added in the textarea, can be made to appear after typing the first few letters of a tag and then pressing the left arrow key.

[yairEO]

Hi, I see. I have neglected testing in IE for a while now and probably some issues have accumulated.

I am currently on vacation way from my Windows machine so it is not easy fix those issues at the moment and might take about 3 weeks until my return.

Is it urgent for you? I was unaware people still use Internet Explorer, unless for a government/bank website

[BadRecordLength]

Hi, Thanks for the swift reply. I'm currently testing your library for a prototype that unfortunately has to support IE, just in the prototyping phase currently but I will have to use an alternative library later on if IE support isn't possible. Hope you enjoy your vacation 😄

[BadRecordLength]

Hi, The prototyping phase has been successful and we'd like to move ahead with Tagify if at all possible. However, as previously stated IE support is unfortunately a must 😞. Please, could you give me an update as to whether or not the IE issues are solvable when possible, as we need to know if we can move forward with Tagify quite soon (I sincerely hope that we can, as it's a brilliant library). I'm of course happy to provide any extra info and help reproducing the problems if needed. Thanks again :-)

[PDM-1]

Hi both, any news on resolution for the IE11 issue?

We have a proof of concept and it's using the library (which we love!) but unfortunately, our organisation still uses IE11, so we can't release our feature until we have a fix for IE.

Would be really grateful for any help you can give.

[yairEO]

I have tested Tagify on IE11 just a few days ago and it seems to be working well.

@PDM-1 - what is the exact problem?

[BadRecordLength]

Hi, Sorry for any confusion, the above person is referring to the same bugs and proof of concept as I am. I've tested the latest version of the library and while the large tags problem has been resolved, the other problems outlined are unfortunately still present. I've created an example repo which is also hosted as a GitHub Pages site here, it's using the latest version of the minified Tagify JS and CSS files. If you open the site in Internet Explorer, you should see the problems outlined earlier in the thread. I'd be happy to perhaps email a screen recording of the issue as well if you're having trouble seeing the bugs. Many thanks :-)

[yairEO]

I see 2 problems, it seems like the suggestions dropdown is not always showing when typing @ and then some characters, and also there are <p> elements which shouldn't be there, which causes unwanted margins

[BadRecordLength]

Are you having the issue where pressing the down arrow key doesn't allow you to select anything below the top dropdown option after starting a tag? When a tag is clicked, it also still allows resizing which isn't desired behaviour. Also, strangely I don't seem to be getting the unwanted <p> elements, here's what the markup looks like for me after typing the same text in IE11:

[yairEO]

I will investigate, thanks

[BadRecordLength]

Hi, thanks for your continued support with this issue, can the issue label be changed back to bug now that you've been able to reproduce? Also, any updates on progress with this? Do you think the issues are solvable?

[yairEO]

Hi yes, I was just working on other open-source projects of mine and haven't been working on Tagify for some weeks now.

I did see the issue with mix-mode and internet explorer tags are resizable when clicked (only in mix-mode) and this I did investigate for hours and it seems a dead-end due to the nature of tagify, tags must be clickable (the x) button for example, should remove the tag, and also, in mix-mode, the tags are contenteditable=false inside a contenteditable=true parent, and this is the root cause of the IE resizing bug... I honestly do not know how to solve this, after doing a lot of digging :/ sorry..

I never give up on a bug unless it's really a dead-end

[BadRecordLength]

Hi thank you, I understand, the resizing bug is not fixable. Do you think the dropdown arrow key navigation bug and the prefix not triggering the dropdown bug are both fixable? The resizing bug can be ignored, however the other two bugs break the ability for the user to select and input tags.

[yairEO]

Hi Henry, I will inspect those other issues you've mentioned again, I don't remember what was the conclusion of the previous examination since I was on vacation at the time :)