MapTable doesn't work in IE11

[mrjones-plip]

Heya! I think we decided that <IE11 won't be supported. However, none of the demos hosted on blocks.org (eg Basic Map - Custom markers) work in modern.ie's latest IE11 VM.

[melalj]

I just tried it on BrowserStack:

I get this error: SCRIPT65535: Invalid calling object (seriously Microsoft... 😒)

Will dive more on this later

[mrjones-plip]

Hey @melalj - You have some time in the next couple of days to bang on this? Be handy for an internal PCH deadline if it was fixed, but only if it's convenient for you.

POSE?

Thanks!

[mrjones-plip]

Never mind! No rush on this now. We'll need it some day, but not just yet. Thanks!

[melalj]

The link that you provided is very specific to his use case. There's no onLoad attribute in MapTable.
I'm not very familiar with the debugging tools of IE.

[mrjones-plip]

Hey again! PCH has prioritized deploying maptable on our IXP Dir home page. There's no rush on this! We'll be spinning up an Windows VM with IE to dive into this henceforth.

[mrjones-plip]

progress! i ran ie11 against the non-minified version. The line it's having problems with if (toString.call(src) === '[object Object]') { in the extendRecursive function:

  function extendRecursive() {
    var dst = {};
    var src = void 0;
    var p = void 0;
    var args = [].splice.call(arguments, 0);

    while (args.length > 0) {
      src = args.splice(0, 1)[0];
      if (toString.call(src) === '[object Object]') {
        for (p in src) {
          if (src.hasOwnProperty(p)) {
            if (toString.call(src[p]) === '[object Object]') {
              dst[p] = extendRecursive(dst[p] || {}, src[p]);
            } else {
              dst[p] = src[p];
            }
          }
        }
      }
    }
    return dst;
  }

so, armed with that detail, it looks like this stack exchange post might be the answer:

You seem to be neglecting the fact

window.toString === Object.prototype.toString; // false

The Window's toString is implementation-specific and there is nothing in the specification saying methods on DOM Host Objects have to work with call/on other objects/etc

If you want to capture this toString but can't assume prototype, try

var toString = ({}).toString;
toString.call({}); // "[object Object]"

i'll dive in and see if there's not a fix somewhere in here!

[melalj]

Change this line:

https://github.com/Packet-Clearing-House/maptable/blob/master/src/components/Table.js#L41

      .data(this.activeColumns.map(k => Object.assign({ key: k }, this.maptable.columnDetails[k])))

to:

      .data(this.activeColumns.map(k => utils.extendRecursive({ key: k }, this.maptable.columnDetails[k])))

[mrjones-plip]

yay! adding var toString = ({}).toString; to the extendRecursive() function and then making your recommended change to table.js per above, totally makes it render correctly in IE !

However now, see the filters don't work :( . The error is in getPossibleFilters(), line 296:

Object doesn't support property or method 'assign'

I'm diving into it now!

[melalj]

https://github.com/Packet-Clearing-House/maptable/blob/dev-11/src/components/Filters.js#L297

Same here, replace Object.assign with utils.extendRecursive

[mrjones-plip]

yay! that did it. now if I can just figure how to commit the changes. see my comment on #11

[mrjones-plip]

next up! Clicking "remove filter" results in an error on line 99 of remove():

Object doesn't support property or method 'remove'

Line 98 is:

if (rowNode) rowNode.remove();

And as well, filters only work 1 deep. so adding a filter for country works, but not country and city. We'll see if fixing the above remove() call fixes two filters working. two filters don't work on any browser! i'll open a separate ticket. #15 filed!

[melalj]

you can use this:
rowNode.parentNode.removeChild(rowNode); instead of rowNode.remove()