Filemanager addEventListener issue in 2nd mat-tab

[Laurens Albers]

Hi,

There is an Javascript issue when a filemanager is loaded within a 2nd tab of the angular material (mat-tab). Any idea what how to fix this?

In my project it generates the following issue:

ERROR TypeError: Cannot read property 'addEventListener' of null

    at KeyboardEvents.push../node_modules/@syncfusion/ej2-base/src/keyboard.js.KeyboardEvents.wireEvents (keyboard.js:154)

    at KeyboardEvents.push../node_modules/@syncfusion/ej2-base/src/keyboard.js.KeyboardEvents.bind (keyboard.js:141)

    at new KeyboardEvents (keyboard.js:117)

    at ContextMenu.push../node_modules/@syncfusion/ej2-filemanager/src/file-manager/pop-up/context-menu.js.ContextMenu.addEventListener (context-menu.js:440)

    at ContextMenu.push../node_modules/@syncfusion/ej2-filemanager/src/file-manager/pop-up/context-menu.js.ContextMenu.render (context-menu.js:43)

    at new ContextMenu (context-menu.js:24)

    at createInstance (util.js:22)

    at ModuleLoader.push../node_modules/@syncfusion/ej2-base/src/module-loader.js.ModuleLoader.inject (module-loader.js:33)

    at FileManagerComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.injectModules (component.js:235)

    at FileManagerComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.appendTo (component.js:134)

I recreated a simplified stackblitz with the same issue(check the 2nd tab inside):

https://stackblitz.com/edit/angular-tabs-material-v36uat?file=app%2Ftabs-overview-example.html

[Prem Kumar Madhan Raj]

Hi Laurens, 

  

 

Thanks for contacting Syncfusion support. 

 

We have checked with the reported issue and found that the template content of the second tab item being initialized and not being appended to the DOM. Due to the element is not appended to the DOM and being processed at the source level throws the reported issue. To overcome this, we suggest to render the file manager component on demand while the second tab item is active. 

If still issue occurs or if your requirement doesn’t meet, kindly get back to us with more information we will be happy to assist you. 

 

Regards, 

Prem Kumar M