bug (header) It doesn't work on IE11; Add polyfill for CustomEvent to support IE11 #186
Description
As we started using some tools for external users ex. Suppliers, it usually comes with the price of supporting browsers we don't even use and that's the old monster IE, ex. IE11
Now if you open any of our tools that use Fabric Header it will be a white page, not rendering anything because there's an error in IE11 support of Custom Event so we need a polyfill which is pretty straightforward or as CanIUse say we can initiate the constructor differently
https://caniuse.com/#feat=customevent
try {
const ce = new window.CustomEvent('test');
ce.preventDefault();
if (ce.defaultPrevented !== true) {
// IE has problems with .preventDefault() on custom events
// http://stackoverflow.com/questions/23349191
throw new Error('Could not prevent default');
}
} catch (e) {
const CustomEvent = (event, params) => {
const evt = document.createEvent('CustomEvent');
const origPrevent = evt.preventDefault;
const newParams = params || {
bubbles: false,
cancelable: false,
detail: undefined,
};
evt.initCustomEvent(event, newParams.bubbles, newParams.cancelable, newParams.detail);
evt.preventDefault = () => {
origPrevent.call(this);
try {
Object.defineProperty(this, 'defaultPrevented', {
get: function () {
return true;
},
});
} catch (e) {
this.defaultPrevented = true;
}
};
return evt;
};
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent; // expose definition to window
}