Choices: IE11 breaks due to untranspiled 3rd party code in Choices.js bundle

[kris-ellery]

Hi there! Thank you for an amazing plugin, I've been using it for couple of years now with great success.

This week I've tried to update Choices.js to 6.0.0 in one of my projects and I've encountered an issue in IE11. Specifically, the output in /node_modules/choices.js/public/assets/scripts/choices.js contain let and const keywords, which are not supported by IE11; I've seen some arrow functions as well. I don't believe these can be polyfilled.

Any idea if this is an error with the library or is it expected? I wouldn't want to run babel on node_modules tho.

Thanks!

[jshjohnson]

Hey @kris-ellery.

This is interesting - so Choices is compiling to ES5 but one of Choice's dependencies is not. With that said, const and let are supported in IE11. Let me investigate

[kris-ellery]

@jshjohnson I had no idea IE11 supports const and let, should've looked at caniuse first. The issue still persist tho, untranspiled 3rd party code in Choices.js bundle. Thanks for your help!

[hope55]

@jshjohnson
Hey Josh! Same issue here. IE stops on untranspiled arrow functions in Fuse.js library included in your choices.js and choices.min.js. I resolved this issue temporarily by including only "node_modules/choices.js" in my babel config, but I hope you can fix it permanently in the next release.

[jordilopez]

@jshjohnson

Hi! Looks like this has been fixed on [email protected]

https://github.com/krisk/Fuse/pull/289

[Abhishek-Kanitkar]

Hi @jshjohnson ,

First of all, thanks a lot for the great tool you have built :)

But I would like to mention that I am unable to see Choices dropdown work in IE11.

There are errors in fuse like mentioned above.

Also the demo link doesn't work at all in IE11.

Can you please guide me here about how can I make it work in my Angular 7 project ?

Thanks in advance !

[jshjohnson]

Fuse has been upgraded in 6.0.1 which should fix this problem. Thanks for highlighting it 👍

[Abhishek-Kanitkar]

Fuse has been upgraded in 6.0.1 which should fix this problem. Thanks for highlighting it

@jshjohnson I have upgraded Choices to 6.0.1 version.

Is there a demo page currently that works with IE11 ?

Here are the things I have done for my Angular 7 project.

1. Added following polyfill script tag
   <script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CArray.prototype.includes%2CArray.prototype.forEach%2CArray.prototype.map%2CArray.prototype.find%2CArray.prototype.some%2CArray.from%2CArray.prototype.reduce%2CArray.prototype.indexOf%2CObject.assign%2CElement.prototype.classList%2CrequestAnimationFrame%2Cfetch"></script>

2. Included Choices .css & .js files in angular.json file.

3. Defined Choices as follows
   try{ const choices = new Choices('#choices-basic', { searchEnabled: false }); }catch(e){ console.log(e); }

But still I am getting errors in IE11 as per attached images.

Can you please kindly help me here ?

[Abhishek-Kanitkar]

Fuse has been upgraded in 6.0.1 which should fix this problem. Thanks for highlighting it

@jshjohnson once the Choices dropdown is rendered on IE11, on mouse over & mouse move, anywhere in page, I am getting exceptions as per image attached above.