IE11: Object doesn't support property or method 'contains'

Getting this error when running the demo page with Internet Explorer 11 (demo page: http://bluekit.blueberry.io/demo). Click on any element in the sidebar to reproduce what you can see below:

It's pointing to this line of code:

react-bluekit/src/app/component/PropsSidebar.react.js

Line 157 in c81e3af

    
           if (!area.contains(evt.target) && !pickerButton.contains(evt.target) && this.state.displayColorPicker) {

On the demo site my debugger claims both area and pickerButton are undefined, but in the app I'm developing on my own, both of these are defined, and pickerButton seems to be an SVG element, which may be the trouble. IE has supported Node.prototype.contains since IE 5: https://developer.mozilla.org/en-US/docs/Web/API/Node/contains#Browser_compatibility

Thanks in advance!

EDIT: Looks like it is related to pickerButton being an SVGElement. You can try this in your console on IE11 (while running the demo page linked to above): document.querySelector('svg').contains, which returns undefined. Try the same in Chrome and it returns the native contains function.

Hi, we do not support IE since it's not officially supported by Microsoft https://www.microsoft.com/en-us/windowsforbusiness/end-of-ie-support

We recommend using different browser than IE.

Thanks for the quick reply. No worries, but it would be handy to have a disclaimer in the readme somewhere. Some folks still have users running on IE11 (out of our control), and it would be handy to see browser support right on the readme, so they can better evaluate whether to use BlueKit.

Created an issue for this so you can track it.