IE 11 Select Change Not Supported

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: IE 11 Select Change Not Supported

Rushman1 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

Rushman1 answered 6 years 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 6 years ago

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

Sebastian Kaczmarek staff pro premium answered 6 years 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 6 years ago

Was this fixed in 4.6.0?

 

Thanks!

Rowe pro answered 6 years 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 6 years 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 6 years 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 6 years ago

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

nathan.harrell answered 6 years ago

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

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

Are you still working on it ?!!

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

Rowe pro commented 6 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 pro premium commented 6 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.

jdyken pro answered 5 years ago

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.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: 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
Tags
select mb-select
Related topics
7
Keyboard tab navigation to search field of material select is not working. Upon receiving the focus to search textbox, dropdown disappears and leaving inaccessible for a keyboard user
2
mdb-select label not wrapped with the select input with 4.8.7
2
Select selected not working !!
2
Searchable select with very large dataset
2
Add/Remove of select options multiplies nested wrappers
About author
Rushman1
31Support score
3Questions 1Answers
0Snippets likes 0Snippets