IE 11 Select Change Not Supported

Topic: IE 11 Select Change Not Supported

Rushman1 free asked 6 years 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

Add comment

jdyken pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Just some user feedback here -

Not supporting IE is a problem. As one of the previous commenters said, it's still a real world problem. Simply saying that it isn't supported isn't helpful to us.

I've been using MDB for about 2 years now and I'll start transitioning off of it next year. There are just too many missteps like this, and then rolling out your new updates breaks functionality and workarounds that I had to put into place with previous versions.

Not trying to be negative here, but this kind of stuff makes it really difficult to stick with MDB.

Mikołaj Smoleński staff commented 5 years ago

Unfortunately, select is one of the components for which we can not guarantee compatibility with IE11. The solution is to use the default select, which is still suported in all browsers, but can't be styled in the material way.

Add comment

BraveTM free answered 5 years ago

0 0 Best answer

Are you still working on it ?!!

Piotr Glejzer staff commented 5 years 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

Please insert min. 15 characters.

Rowe pro commented 5 years 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 commented 5 years 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. 15 characters.

Add comment

Sebastian Kaczmarek staff answered 5 years ago

0 0 Best answer

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

Add comment

nathan.harrell free answered 5 years ago

0 0 Best answer

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

pleal1976 pro commented 5 years ago

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

Add comment

kathannhea pro answered 6 years ago

0 0 Best answer

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

Add comment

Rowe pro answered 6 years ago

0 0 Best answer

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

Add comment

Rowe pro answered 6 years ago

0 0 Best answer

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

Add comment

Rushman1 free answered 6 years ago

1 0 Best answer

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.
<pre class="code-toolbar grey lighten-2 p-3 mb-3">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.</pre>

Please insert min. 20 characters.

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 commented 6 years ago

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

Add comment

Rowe pro answered 6 years ago

0 0 Best answer

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.

Add comment

Sebastian Kaczmarek staff answered 6 years ago

0 0 Best answer

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 free commented 5 years ago

Was this fixed in 4.6.0?

Thanks!

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: Laptop
Browser: IE 11
OS: Windows 7 Pro
Provided sample code: No
Provided link: No

Rushman1

31Support score
3Questions 1Answers 0Snippets