eliottvincent / vue3-sortablejs

↕️ Re-orderable drag-and-drop lists, via a Vue directive.
https://www.npmjs.com/package/vue3-sortablejs
14 stars 1 forks source link

Update hook with the same options triggers multiple Sortable initializes, which causes errors later #3

Closed titamota closed 1 year ago

titamota commented 1 year ago

Hey, you did great directive!

One thing is annoying though:

https://github.com/eliottvincent/vue3-sortablejs/blob/b436c7fc32f15379efa8980ce67a37a4fa5089bd/src/directive.js#L40-L44

Options object is compared not deeply here, so every time for some reason directive 'updated' hook is called, though binding options object fields did not change deeply, the reference to options object had changed, so here another Sortable instance creation is triggered, which leads to too many initialized Sortable instances in memory, which all point to same DOM node. And when inital component gets unmounted, only one (last one) Sortable instances gets destroyed, leaving other instances which point to elements no longer in DOM still in memory. So, next time another component initialize directive, Sortable will try to do '_detectNearestEmptySortable' over all it's instances, including the ones no longer pointing to DOM nodes. Which leads to annoying Sortable complainging in console about '_detectNearestEmptySortable' thrown exception.

Though these errors are not critical, because they are related to nodes, no longer present in DOM, this still may cause troubles... You probably may use smth like 'deep-equal' module here or manually do shallow equality check. I used deep-equal lib in the lines above and the errors were gone.

eliottvincent commented 1 year ago

Hey! Nice catch :)

It's fixed now in version 1.0.7: https://github.com/eliottvincent/vue3-sortablejs/releases/tag/v1.0.7 and https://www.npmjs.com/package/vue3-sortablejs/v/1.0.7