Micromodal icon indicating copy to clipboard operation
Micromodal copied to clipboard

IE11

Open klprt opened this issue 5 years ago • 4 comments

Oh dear, I know... But still I have to ask; what does it take to get Micromodal to work on IE11? I can guess this is linked to ES6 new stuff like spread operator but I wondered anyway. Thanks a lot for this module which is super useful.

klprt avatar Apr 30 '20 08:04 klprt

I also have been running into issues with getting Micromodal to work in IE 11, but after a few edits I was able to get this working... Here's how I went about fixing it:

  1. Include the polyfills noted on #49
  2. I cloned PR #313 and built Micromodal locally, using that version instead (I think this makes the Array.from polyfill unnecessary, but for now I still have it included)

At this point, I was still getting the invalid spread error. After a bit more debugging, I found that what was happening is Micromodal was calling its function _toConsumableArray(arr) when I called Micromodal.init(). The parameter arr was a NodeList of length 0 - I'm unsure why this is, and if this is expected or not.

In tracing my way through, I noticed that prior to throwing this error, the function _unsupportedIterableToArray is called to, I think, attempt to convert arr to an array so it is iterable. That function is defined with a parameter minLength but when it is called, no minLength is provided. I'm unsure if this is intentional or not, so I didn't change it.

What I did change, was _toConsumableArray by adding a quick condition before its return statement:

function _toConsumableArray(arr) {
    if (!arr || arr.length < 1) return [];
    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
  }

Now, if arr is undefined or has a length of 0, I simply return a new empty array. I'm unsure if this problem is because of my implementation / use, or an error in Micromodal in IE. I'm also not entirely certain if the build from PR #313 is necessary to resolve this error, of if the change I made alone is enough.

I hope this information is useful to @ghosh to determine if a fix needs to be made, or can shed some light on something i may be doing wrong in my implementation.

joshvickerson avatar Jun 24 '20 15:06 joshvickerson

After working with this further, the fixes I describe in my previous comment only seem to have resolved the error when calling Micromodal.init(). Later when showing a modal, the error still occurs. IE 11 seems to take issue with receiving a NodeList for some reason.

I've worked around this in one instance by wrapping the method in a try/catch block, and while the modal does appear, I think this prevents all of Micromodal's features from working correctly in IE.

Happy to help implement a solution for this, if someone can point me in the right direction to get started.

joshvickerson avatar Jun 25 '20 18:06 joshvickerson

What is the state of this issue? We still would like to support IE11 but at the moment this is not possible. Any news?

pascalknecht avatar Aug 06 '20 13:08 pascalknecht

Include this in your head and the modal library will work as is:

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=NodeList.prototype.forEach%2CArray.prototype.includes%2Cdefault"></script>

Source: https://polyfill.io/

jq-87 avatar Sep 03 '20 13:09 jq-87