Dom Nodes & JS Event Handlers are not released by itself after control destroyed

[Nagendra Gupta]

Hey Team,

I'm using some of syncfusion controls in my application, but unfortunately after closing the ngbModule & Destroying the component syncfusion controls are not releasing their activeness from dom. For clear reference attaching the video evidence for the same.

Reference Created with:

1. ngbModal
2.   Angular Version 13
3. Syncfusion MultiSelectDropdown

Package Json Snap

"@angular/animations": "^13.0.2",

    "@angular/cdk": "^13.0.2",

    "@angular/common": "^13.0.2",

    "@angular/compiler": "^13.0.2",

    "@angular/core": "^13.0.2",

    "@angular/flex-layout": "^13.0.0-beta.36",

    "@angular/forms": "^13.0.2",

    "@angular/material": "^13.0.2",

    "@angular/platform-browser": "^13.0.2",

    "@angular/platform-browser-dynamic": "^13.0.2",

    "@angular/router": "^13.0.2",

    "@angular/service-worker": "^13.0.2",

"@ng-bootstrap/ng-bootstrap": "^11.0.0-rc.0",

"@syncfusion/ej2": "^19.3.56",

    "@syncfusion/ej2-angular-buttons": "^19.3.53",

    "@syncfusion/ej2-angular-calendars": "^19.3.56",

    "@syncfusion/ej2-angular-documenteditor": "^19.3.56",

    "@syncfusion/ej2-angular-dropdowns": "^19.3.56",

    "@syncfusion/ej2-angular-grids": "^19.3.56",

    "@syncfusion/ej2-angular-inputs": "^19.3.53",

    "@syncfusion/ej2-angular-lists": "^19.3.53",

    "@syncfusion/ej2-angular-navigations": "^19.3.54",

    "@syncfusion/ej2-angular-notifications": "^19.3.53",

    "@syncfusion/ej2-angular-popups": "^19.3.53",

    "@syncfusion/ej2-angular-richtexteditor": "^19.3.55",

    "@syncfusion/ej2-angular-treegrid": "^19.3.55",

    "@syncfusion/ej2-data": "^19.3.53",

    "@syncfusion/ej2-grids": "^19.3.56",

    "@syncfusion/ej2-navigations": "^19.3.54",

TS Config Snap

/* To learn more about this file see: https://angular.io/config/tsconfig. */

{

  "compileOnSave": false,

  "compilerOptions": {

    "baseUrl": "src",

    "outDir": "./dist/out-tsc",

    "forceConsistentCasingInFileNames": true,

    "strict": false,

    "noImplicitOverride": true,

    "noPropertyAccessFromIndexSignature": true,

    "noImplicitReturns": true,

    "noFallthroughCasesInSwitch": true,

    "sourceMap": true,

    "declaration": false,

    "noImplicitUseStrict": true,

    "downlevelIteration": true,

    "experimentalDecorators": true,

    "moduleResolution": "node",

    "noImplicitAny": false,

    "strictPropertyInitialization": false,

    "importHelpers": true,

    "target": "es2015",

    "module": "es2020",

    "lib": [

      "es2018",

      "dom"

    ]

  },

  "angularCompilerOptions": {

    "enableI18nLegacyMessageIdFormat": false,

    "strictInjectionParameters": false,

    "strictInputAccessModifiers": false,

    "strictTemplates": false,

    "strictMetadataEmit": true,

    "fullTemplateTypeCheck": false

  }

}

Attachment: AngularV13_9d57898b.zip

[Deepak Ramakrishnan]

Hi Nagendra, 

 

Greetings from Syncfusion support. 

 

We have created the sample with provided code snippet , But unfortunately we are facing some issues in the provided sample (Also we have attached the created sample for reference) . So we request you to provide the runnable sample which reproduces the issue , It will help us to further validate the issue and provide you the better solution.Also let us know whether you are facing the same issue outside the modal. 

 

 

Sample Link : https://stackblitz.com/edit/angular-tqrts8?file=app.component.html  

 

 

Thanks, 

Deepak R. 

[Nagendra Gupta]

Dear Deepak

We are sending you a running sample for same

Instruction for Run the sample

1.First Run npm install

2.Then ng serve

Note: This is a very serious issue in your controls. Our application performance is very poor due to these controls.

Thanks with regards

Nagendra Gupta

Attachment: Angular13LowPerformance_2025ace5.zip

[Deepak Ramakrishnan]

 

Yes we can reproduce the issue in the provided sample . We will check the feasibility to include the fix in our end and update the details within two business days(27^th,December 2021). 

[Nagendra Gupta]

Thanks Deepak for the acceptance of the bug. This is the pin point issue at our end and my management decided to withdrawal of the angular app with syncfusion control. I hope you can understand the issue priority, please request you to resolve the issue as soon as possible.

Once again thanks for the update.

[Nagendra Gupta]

Hi Deepak,

Awaiting your response.

[Deepak Ramakrishnan]

Hi Nagendra Gupta, 

 

We will update the further details in one business day (29^th,December 2021). We appreciate your patience until then. 

 

 

Thanks, 

Deepak R 

[Deepak Ramakrishnan]

Hi Nagendra, 

 

We have considered the reported issue as bug at our end . We will include the fix in the weekly release to be rolled out at January 18 ,2022 .You can track the status of the link by using the below feedback link .  

 

https://www.syncfusion.com/feedback/31563/multiselect-components-do-not-get-destroyed-properly-when-the-parent-element-is  

 

Thanks, 

Deepak R 

[Nagendra Gupta]

Hey Deepak,

Waiting for bug fix release also your provided link is not accessible, showing access is denied.  

[Sureshkumar P]

We have resolved this issue internally. But the fix was break existing functionality. We need to complete testing against this fix. We will include in upcoming patch release which is expected to be rolled out on February 9^th, 2022. 

[Sureshkumar P]

Hi Nagendra,  

      

We have fixed your reported issue from our end in the latest 19.4.50 version. So, we suggest you upgrade to our latest version to resolve the current issue.   

 

Release notes: https://ej2.syncfusion.com/angular/documentation/release-notes/19.4.50/?type=all#multiselect  

 

Regards,    

Sureshkumar P 

 

[Nagendra Gupta]

Hey team

We have tested your latest version 19.4.52  but still problem exists.

This is a very serious issue in your all controls specially related to all type of dropdowns. Our application performance is very poor due to these controls.

Thanks in Advance

Sheetal Chandra

Attachment: bug_97646be.zip

[Sureshkumar P]

Hi Nagendra, 

 

We have validated our fix. Before we include the fix, the DOM nodes count is above 3K plus after collect the garbage. After fix the issue we have reduced the Dom nodes count as 2K. that will works as expected in our current source. Also Still, we need to improve the performance on our end, we are working on this will give better improvement on the Vol-1 2022 release.  Which is expected to be available on End of March 2022. 

 

 

After fix after collect the garbage collection: 

 

 

Find the video demonstration for the performance improvement: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiselectPerformanceImprovement814292181  

 

Regards, 

Sureshkumar P