e.target.className.indexOf is undefined if target is svg element about angular-multi-select HOT 7 CLOSED

I had the same issue with 'use' tags that we use inside 'svg' tags. To fix this error you can extend SVGAnimatedString prototype (as this is a type that className property returns in this case - apparently it does not have indexOf method, hence the unhandled exception), like this:

(SVGAnimatedString.prototype as any).indexOf = (() => {
    return function() {
        return this.baseVal.indexOf.apply(this.baseVal, arguments);
    };
})();

Once you drop this inside root directory of your app, the issue will be resolved as now your 'use' tags (or any other tag that returns type SVGAnimatedString type, rather then string, for className property of the node element) will have indexOf method.

In my case adding 'notranslate' to each svg was not best solution as on the page there was a lot of svgs added at different times by different components.

Hope it will help someone out there as well.

from angular-multi-select.

Hi @Hypercubed, noted the fix.

Before I merge, can I see how to reproduce this bug? Maybe you can paste your controllers & views in JsFiddle or Plunker. Thanks!

from angular-multi-select.

Sure... look here: http://plnkr.co/edit/cg7wpW?p=preview

Click on the multi-select then click on the lion. The multi-select doesn't close.

from angular-multi-select.

You will see the output:

Uncaught TypeError: undefined is not a function angular-multi-select.js:447

from angular-multi-select.

After I saw the SVG sample case you provided & googling around, I realized there's a much better way of handling the button's toggle.

As for now I'm working on the group / category feature, so I'll just merge your solution as a first-aid fix. Thanks @Hypercubed ! :)

from angular-multi-select.

Turns out the issue is due to Google's Translate extension. Disabling it solve the problem.

from angular-multi-select.

@sandun86 Thanks.

from angular-multi-select.