IE 11 Select Change Not Supported


Topic: IE 11 Select Change Not Supported

Rushman1 asked 9 months ago

I have an issue with IE 11 and MB-Select.  I get an error when I try to subscribe to the onchange function of the select.  The error I get is SCRIPT445: Object doesn't support this action.  It is coming from mdb.js line 20883.
key: '_triggerChangeOnNativeSelect',
value: function _triggerChangeOnNativeSelect() {

var keyboardEvt = new KeyboardEvent('change', {
bubbles: true,
cancelable: true
});
this.$nativeSelect.get(0).dispatchEvent(keyboardEvt);
}
  I just don't know how to fix it.  And why is it happening when Chrome and Firefox don't have this issue?  Some guidance would be appreciated. Some other information, I am running Modernizr-2.8.3.js in the head of my page.  The onchange function calls a valid function in the js page. Thanks, Tim

Rushman1 answered 8 months ago

Rowe, What I needed to do was to add a shim to a script after mdb.js and in the mdb.js file I had to change the code.
Here is the shim:

// PolyFill/Shim for MDB-Select issue (IE Only)
(function () {
	if (typeof window.CustomEvent === "function") return false;
	function CustomEvent(event, params) {
	 params = params || { bubbles: false, cancelable: false, detail: undefined };
	 var evt = document.createEvent("CustomEvent");
	 evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
	return evt;
	}
	CustomEvent.prototype = window.Event.prototype;
	window.CustomEvent = CustomEvent;
})();
// End PolyFill

And here is the code for mdb.js (Line 20883)
key: "_triggerChangeOnNativeSelect",
    value: function _triggerChangeOnNativeSelect() {
        var keyboardEvt = new CustomEvent("change",
            {
		detail: undefined,
		bubbles: true,
		cancelable: true
	     });
/*  Removed this by commenting out
	var keyboardEvt = new KeyboardEvent('change', {
		bubbles: true,
		cancelable: true
	});
*/
    // Didn't have to change this line
    this.$nativeSelect.get(0).dispatchEvent(keyboardEvt);
}

Hope this helps you out.

Tim

P.S. - I am really not liking the functionality of this messaging/forum section. I cannot add code and format it as code unless the code is the very last thing in the form.  So if it looks like my tag line and name are part of the code it is because of that limitation. Sorry.

Sebastian Kaczmarek staff pro premium commented 8 months ago

Thanks for the solution, we'll try to include something similar in our package

Sebastian Kaczmarek staff pro premium answered 9 months ago

Hi, sorry for inconveniences. We will fix it in the next release. For now, just use jQuery .on()  method or get rid of the invalid code in material-select.js file or in mdb.js directly.

nathan.harrell commented 5 months ago

Was this fixed in 4.6.0?

 

Thanks!


Rowe pro answered 8 months ago

Hi there. I'm having the same issue. Can you expand on you solution please? Getting rid of the invalid code prevents it working at all in FF / Chrome etc.

Rowe pro answered 8 months ago

Hey Tim, That's very kind of you for sharing this, thank you. I shall test this first thing Monday. This issue has come up at the last minute of testing a site we're doing so I sadly don't have the time to change things or write something custom, so this is really appreciated. All the best, Rich

Rowe pro answered 8 months ago

Tim, Just a quick note to say thank you so much for this fix - all is good now with IE11!   Cheers, Rich

kathannhea pro answered 7 months ago

Was this corrected in a later release yet or does it require the shim?

Any update on this?  Has it been fixed in the most recent version?


pleal1976 pro commented 5 months ago

I can say that in Prop 4.6.0 the issue is still there and needs the Shim and CustomEvent. :(


Sebastian Kaczmarek staff pro premium answered 5 months ago

Guys, we are working on that. We have many things to deliver and have various priorities. I'll get back to you as soon as it gets fixed


BraveTM pro premium answered 6 days ago

Are you still working on it ?!!


Piotr Glejzer staff commented 5 days ago

Hi,

as you can read in our official statement of supported browsers and devices, we do not support IE.

https://mdbootstrap.com/general/browsers-and-devices/

We are doing our best to ensure compatibility with older browsers, however, due to technical limitations, it's not always possible. IE11 is almost 6 years old and doesn't support many crucial features like flexbox.

If we decided to fully support old browsers, we would neglect the development and improvement of our products

Best Regards, Piotr


Rowe pro commented 5 days ago

Uh, you could have told us that straight away rather than promising us twice it would be fixed. You have a fix, why not implement it? Sadly IE11 is still a real world problem that needs to be dealt with. In the real world we're not living in an IE-less utopia. Whilst it's still supported and has a base of over 2% it needs to be a browser we support. Telling a client 'no' is simply not an option in our world.


Bartłomiej Malanowski staff pro premium commented 4 days ago

Microsoft announced, that they will stop supporting IE 10 in the January 2020. Furthermore, in the future, they'll also stop supporting IE 11. Supporting IE 11 is always difficult and time-consuming because it isn't supporting some of the features that other browsers do support (for example flexbox, spread operator or keyboard events). If we'd wish to polyfill them, we'd spend half of our time to do it for the browser that will die soon instead of doing something more valuable. I recommend switching to a modern web browser (like Chrome/Firefox/Edge) which does have definitely fewer issues like this.


Please insert min. 20 characters.