Integrations/sortable : wrong number of items after `moveArrayElement` call

Ericlm commented 1 year ago

Describe the bug

I'm trying to use the sortable integration with useSortable inside a component. The reordering of HTML elements works well, however, the call to moveArrayElement seems buggy:

As you can see, there is a log before the call and there is 3 items in the array; however, after the call, only two items are appearing ; the dragged item seems to disappear.

Reproduction

https://codesandbox.io/p/sandbox/confident-mendel-6vjzsd?file=%2FREADME.md

System Info

System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1
    Memory: 466.89 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.4.0 - ~/.asdf/installs/nodejs/20.4.0/bin/node
    npm: 9.7.2 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.5.1
    Safari Technology Preview: 17.0
  npmPackages:
    @vueuse/components: ^10.2.1 => 10.2.1 
    @vueuse/core: ^10.2.1 => 10.2.1 
    @vueuse/integrations: ^10.2.1 => 10.2.1 
    vue: ^3.3.4 => 3.3.4

Used Package Manager

npm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
[X] The provided reproduction is a minimal reproducible example of the bug.

azamat-sharapov commented 1 year ago

You need nextTick(), see https://github.com/vueuse/vueuse/blob/main/packages/integrations/useSortable/index.md#tips

Ericlm commented 1 year ago

Thank you, it works now ! This precision should be in the website's documentation I think 🙂

AlejandroAkbal commented 1 year ago

This is still happening!

https://codesandbox.io/p/sandbox/test-vueuse-sortable-forked-k783fk?file=%2Fsrc%2FApp.vue%3A38%2C19

AlejandroAkbal commented 1 year ago

This is still happening!

codesandbox.io/p/sandbox/test-vueuse-sortable-forked-k783fk?file=%2Fsrc%2FApp.vue%3A38%2C19

@Ericlm

Ericlm commented 1 year ago

Yeah is seems that it keeps logging only two items in the array now... Pretty strange 🤔 Anyway, I preferred to implement the reordering myself to avoid any problem with asynchronous code. This is in the doc with : // nextTick required here as moveArrayElement is executed in a microtas but I don't really understand why. Anyway, seems easier to reorder with oldIndex and newIndex instead of calling moveArrayElements.

I'll reopen the issue as there could be an easier way to handle this (making it synchronous maybe) 🙂

idesignzone commented 8 months ago

I am facing this problem in Nuxt. without nextTick, sortable works fine but with nextTick, result array is missing an item after drag.

useSortable(el, list, {
  onUpdate: (e) => {
    moveArrayElement(list.value, e.oldIndex, e.newIndex);
    nextTick(() => {
      console.log(list.value.map((i) => i.id));
    });
  },
});

"@vueuse/core": "^10.7.2",
"@vueuse/nuxt": "^10.7.2",

vueuse / vueuse