Problem with my old code after installing 16.3.25

[Paul Kocher]

Hi!

So in the newest version of @syncfusion/[email protected] the change-event triggers twice which broke my code.

This is the console.log:

{id: 2, checked: true} ---> first call

KlientHilfsmittelSituationComponent.html:15 ERROR TypeError: Cannot read property 'checked' of undefined

    at KlientHilfsmittelSituationComponent.push../src/app/klient/components/klient-tabs/klient-hilfsmittel-situation/klient-hilfsmittel-situation.component.ts.KlientHilfsmittelSituationComponent.onCheckboxChange (klient-klient-module.js:1974)

    at Object.eval [as handleEvent] (KlientHilfsmittelSituationComponent.html:16)

    at handleEvent (vendor.js:49163)

    at callWithDebugContext (vendor.js:50256)

    at Object.debugHandleEvent [as handleEvent] (vendor.js:49959)

    at dispatchEvent (vendor.js:46622)

    at vendor.js:48102

    at SafeSubscriber.schedulerFn [as _next] (vendor.js:42475)

    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (vendor.js:221483)

    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (vendor.js:221421)

View_KlientHilfsmittelSituationComponent_2 @ KlientHilfsmittelSituationComponent.html:15

push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ vendor.js:50218

push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ vendor.js:40631

dispatchEvent @ vendor.js:46626

(anonymous) @ vendor.js:48102

schedulerFn @ vendor.js:42475

push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ vendor.js:221483

push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ vendor.js:221421

push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ vendor.js:221364

push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ vendor.js:221341

push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ vendor.js:221106

push../node_modules/@syncfusion/ej2-angular-base/src/component-base.js.ComponentBase.trigger @ vendor.js:100263

push../node_modules/@syncfusion/ej2-buttons/src/check-box/check-box.js.CheckBox.clickHandler @ vendor.js:119179

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ polyfills.js:2743

onInvokeTask @ vendor.js:42723

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ polyfills.js:2742

push../node_modules/zone.js/dist/zone.js.Zone.runTask @ polyfills.js:2510

push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ polyfills.js:2818

invokeTask @ polyfills.js:3862

globalZoneAwareCallback @ polyfills.js:3888

KlientHilfsmittelSituationComponent.html:15 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 1, nodeDef: {…}, elDef: {…}, elView: {…}}

View_KlientHilfsmittelSituationComponent_2 @ KlientHilfsmittelSituationComponent.html:15

push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ vendor.js:50218

push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ vendor.js:40636

dispatchEvent @ vendor.js:46626

(anonymous) @ vendor.js:48102

schedulerFn @ vendor.js:42475

push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ vendor.js:221483

push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ vendor.js:221421

push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ vendor.js:221364

push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ vendor.js:221341

push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ vendor.js:221106

push../node_modules/@syncfusion/ej2-angular-base/src/component-base.js.ComponentBase.trigger @ vendor.js:100263

push../node_modules/@syncfusion/ej2-buttons/src/check-box/check-box.js.CheckBox.clickHandler @ vendor.js:119179

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ polyfills.js:2743

onInvokeTask @ vendor.js:42723

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ polyfills.js:2742

push../node_modules/zone.js/dist/zone.js.Zone.runTask @ polyfills.js:2510

push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ polyfills.js:2818

invokeTask @ polyfills.js:3862

globalZoneAwareCallback @ polyfills.js:3888

{id: 2, checked: undefined} --> second call which then makes the whole function fail

My code looks like this:

onCheckboxChange(e: any) {

console.log(e);

if (e.event.checked && e.event != undefined) {

let pSituation: KPsituation = {

klientId: this.klient.id,

psituationId: e.id

};

this.kPsituation.push(pSituation);

this.addOrRemovePsituation.emit({

action: 'add',

psituationId: e.id

});

}

if (!e.event.checked) {

this.kPsituation.forEach((item, index) => {

if (item.psituationId == e.id) {

this.kPsituation.splice(index, 1);

this.addOrRemovePsituation.emit({

action: 'remove',

psituationId: e.id

});

}

});

}

}

I just double-checked with a backup of my app which uses an older version (@syncfusion/[email protected]) and works great.

Is there a way to fix this with the current release or should I revert to 16.3.21?

Thanks

Paul

[Silambarasan I]

Hi Paul, 

 

Thank you for using Syncfusion products. 

 

We can reproduce the reported issue “Change Event triggers two times in CheckBox – Angular” in our end and we confirmed this as a defect. We will fix this issue and include it in our upcoming patch release on October 30, 2018. We appreciate your patience until then. 

 

Meanwhile, we suggest you to resolve this issue with the below workaround solution. 

 

StackBlitz Link:  

https://stackblitz.com/edit/angular-cxt8bs-eo9vyw?file=checkbox.component.ts 

 

TS: 

 

public changeHandler(e: any) : void { 

    if (e.event != undefined && e.checked ) 

    //.. 

} 

 

Regards, 

Silambarasan 

[Paul Kocher]

Hi Silambarasan,

thanks for your reply! Made me realize I forgot to add the undefined check to the !e.checked part. Now everything works.

Thanks

[Silambarasan I]

Hi Paul, 

 

Thanks for your update. 

 

As we stated earlier, we will include the fix for the issue “Change Event triggers two times in CheckBox – Angular” in our upcoming patch release on October 30, 2018.  

 

Please let us know if you need any further assistance. 

 

Regards, 

Silambarasan