Error replicating sample due to draggable error (v20.3.48)

[Tom Maddox]

Hi there,

I'm currently trying to replicate the DashboardLayout basic sample in both Vue 3 and React but seem to encounter the same issue relating to the draggable.js library included as part of the @syncfusion/ej2-base dependency.

When using the default component without specifying a value for :allowDragging="", or when specifying the value as "true", I get the following:

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')

at Draggable2.setDragArea (draggable.js:685:86)

at dashboard-layout.js:2096:21

at Proxy.forEach ()

at DashboardLayout2.updateDragArea (dashboard-layout.js:2094:29)

at DashboardLayout2.render (dashboard-layout.js:196:14)

at Component2.appendTo (component.js:185:18)

at ComponentBase2.mounted (component-base.js:111:27)

at runtime-core.esm-bundler.js:2710:40

at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)

at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)

However, this error (and any warning regarding unhandled component errors) disappear when setting :allowDragging="false" - this behaviour is replicated between both React and Vue using the relevant packages.

I have attempted using both Vite and Babel (e.g npm init vue@3 and using vue-cli as per the sample pages), the error persists across both approaches.

Is this a bug I should be reporting, or am I doing something wrong? Adding a class to the DashboardLayout does not prevent the error.

Kind regards,

Tom

[LeoLavanya Dhanaraj]

Hi Tom,

Sorry for the inconvenience.

We have validated the reported issue in the Vue Dashboard Layout component and considered it a bug on our end. This issue has been caused by some internal bug fixes. The fix for this issue will be included in our weekly patch release on October 18, 2022. You can track the status of the issue fix using the following feedback link.

Feedback link : https://www.syncfusion.com/feedback/37028/need-to-fix-the-incorrect-position-of-the-helper-element-while-dragging-the

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

We appreciate your patience.

Regards,

Leo Lavanya Dhanaraj

[LeoLavanya Dhanaraj]

Hi Tom,

Thanks for your patience.

We have validated your reported issue with the Vue Dashboard Layout component. We understand that you are facing an error issue while performing the Drag and Drop actions between the panels. We have already resolved this issue in our latest version(V20.3.50). To access this fix, we suggest you update the package to the latest version. For your reference, we have attached the sample.

Sample : https://codesandbox.io/s/sad-dawn-5tobci

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj