Datepicker throws error in IE11

[pchristou]

Hi,

This may be linked to issue #58 but IE11 throws up an error upon the user selecting a date (or clicking any other buttons in the date widget). The error seems somewhat generic so is difficult to track down to a specific line... Note that the functionality still works but the same error is not thrown in Firefox or Chrome.

The markup I'm using is simply <input type="date" materialize="pickadate" class="datepicker">

Error that's thrown on selection / clear (highlighted line in image changes depending on whether the key pressed was a selection or clear command)

[rubyboy]

@pchristou Are you able to try it out with a simple MaterializeCSS import (no angular or wrapper) ? Just to confirm the problem is in the wrapper and not in MaterializeCSS itself.

Here's how you'd import the vanilla MaterializeCSS:

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

[pchristou]

@rubyboy vanilla materialize works. You can see there's no errors upon selecting a date.

[rubyboy]

I found the problem. Working on it (something to do with dispatching events in IE - it doesn't like the new Event("input") syntax).

[pchristou]

@rubyboy Aha, sounds like this? http://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work

[rubyboy]

Yeah, working this Polyfill into a TypeScript style: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

[rubyboy]

A fix has been released. I've tested and also released a new version to http://angular2-materialize.surge.sh and it seems to work fine on IE11 now.
@pchristou Are you able to verify and close the issue if it works? Thanks.

[pchristou]

@rubyboy demo seems fine now.

I included the 1 additional file and modified the materialize-directive.ts file in my own project then rebuilt and run the solution but it's still erroring. Anything else I need to do that I may be missing?

Thanks for the quick turnaround on this.

[rubyboy]

Sorry for not answering. Going on holidays :)
Hopefully you got it working...
Cheers.

[pchristou]

Yep, all working. Have a good holiday!

On Tuesday, 12 July 2016, rubyboy notifications@github.com wrote:

Sorry for not answering. Going on holidays :)
Hopefully you got it working...
Cheers.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
#60 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/ARZk1E7Zw4OclB-baMowoEOrMLn8QJTHks5qU7cBgaJpZM4JH2i4
.

[Chipintoza]

Hello...
when i compiling typescript generate error:
src/materialize-directive.ts(118,69): error TS2350: Only a void function can be called with the 'new' keyword.

jQueryElement.on("change", e => nativeElement.dispatchEvent(new CustomEvent("input")));

[rubyboy]

Me too. I ignore it in my project.
Any ideas how to fix it? It's the CustomEvent polyfill to be able to dispatch a "change" event in all browsers.

[Chipintoza]

I can not run your app. for testing

there is tsc errors:

[01:35:47] Starting 'tsc'...
/Users/Chipintoza/GSS Projects/materialize/angular2-materialize/app/app.module.ts(3,29): error TS2307: Cannot find module '@angular/forms'.
app/main.ts(1,8): error TS2656: Exported external package typings file '/Users/Chipintoza/GSS Projects/materialize/angular2-materialize/node_modules/zone.js/dist/zone.js.d.ts' is not a module. Please contact the package author to update the package definition.
src/materialize-directive.ts(118,69): error TS2350: Only a void function can be called with the 'new' keyword.
/Users/Chipintoza/GSS Projects/materialize/angular2-materialize/app/app.routing.ts(60,14): error TS4023: Exported variable 'routing' has or is using name 'ModuleWithProviders' from external module "/Users/Chipintoza/GSS Projects/materialize/angular2-materialize/node_modules/@angular/core/src/metadata/ng_module" but cannot be named.

[Chipintoza]

you can change custom-event-polyfill.ts:

function CustomEvent(type, bubbles, cancelable, detail) {
var event = document.createEvent('CustomEvent');
event.initCustomEvent(type, bubbles, cancelable, detail);
return event;
}
if ("Event" in window) {
CustomEvent.prototype = window.Event.prototype;
}
function createCustomEvent(type, params) {
if (params === void 0) { params = { bubbles: false, cancelable: false, detail: undefined }; }
var customEvent = Object.create(CustomEvent.prototype);
return CustomEvent.call(customEvent, type, params.bubbles, params.cancelable, params.detail);
}
exports.createCustomEvent = createCustomEvent;

and use exported createCustomEvent

[Chipintoza]

i change it by:

`function CustomEvent(type: string, eventInitDict?: CustomEventInit) {
var event = document.createEvent('CustomEvent');
event.initCustomEvent(type, eventInitDict.bubbles, eventInitDict.cancelable, eventInitDict.detail);
return event;
}

if ("Event" in window) {
CustomEvent.prototype = (window as any).Event.prototype;
}

export function createCustomEvent(type: string, eventInitDict: CustomEventInit = { bubbles: false, cancelable: false, detail: undefined }): CustomEvent {
let customEvent = Object.create(CustomEvent.prototype);
return CustomEvent.call(customEvent, type, eventInitDict)
}
`