Topic: IE 11 Select Change Not Supported
Rushman1 free asked 6 years ago
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
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.
BraveTM free answered 5 years ago
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
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.
Sebastian Kaczmarek staff answered 5 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
nathan.harrell free answered 5 years ago
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. :(
kathannhea pro answered 6 years ago
Rowe pro answered 6 years ago
Rowe pro answered 6 years ago
Rushman1 free answered 6 years ago
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 packageRowe pro answered 6 years ago
Sebastian Kaczmarek staff answered 6 years ago
.on()
method or get rid of the invalid code in material-select.js
file or in mdb.js
directly.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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