Emit sometimes does not emit custom events or overriden native events (dragend)
Vue version
3.3.4
Link to minimal reproduction
Steps to reproduce
- Drag the item in 'Always last' section to some other item and drop it. (the handle looks like '...255', the drop area shows 'listening' when dragging and 'visible' for where the drop will end up)
- In console you can see logs for what happened
- See what is expected in expected section below
If you drag for example the first item to the third item it works as expected, custom event is called (as well as native but in my codebase the custom event is called 'dragend' so it overrides it)
What is expected?
Custom dragend event should have been called and there should be a log in a console for it.
What is actually happening?
Only native dragend event has been called and is logged in the console
System Info
System (WSL2 on Windows 11):
OS: Linux 5.10 Ubuntu 20.04.5 LTS (Focal Fossa)
CPU: (16) x64 AMD Ryzen 7 6800HS with Radeon Graphics
Memory: 11.14 GB / 15.27 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
Yarn: 1.22.17 - ~/workspace/digisign/app/node_modules/.bin/yarn
npm: 9.7.1 - ~/.nvm/versions/node/v16.19.0/bin/npm
Browsers:
Chrome: 109.0.5414.119
npmPackages:
vue: ^3.3.4 => 3.3.4
Any additional comments?
Last working version of Vue was 3.3.2. Could not try it on 3.3.3 cause of a bug fixed in 3.3.4.
When trying to change version in Vue SFC Playground it happens in any of them. Yet it works on version 3.3.2 and lower in the codebase I work on.
Playground with the bugged behavior, not just console logs In the playground with bugged behavior in the link above you can see how it gets stuck in drag when the event is not called.
Background/context: We have a collection that can be sorted using drag 'n' drop (or input [not included]) with some custom behavior the 'Always last' section where the items are set to constant 255 and are separated from the other items ). The dragend ervent stopped working on latest version of Vue when dragging from the 'Always last' section back to the normal section. It worked on version 3.2.45 and when tested also on 3.3.2
Hello @ondrej-tesar-digital
The issue is that you're using the index as key for the Row components and you're mutating the list of recipients, which causes the element on which the dragStart fired to be unmounted, thus no dragEnd event will be emitted
If you try a unique key for each recipient, it should work as expect
For example, I saw that you duplicate the recipient with hidden: true so a :key="`${recipient.name}-${recipient.hidden}`" should work (you can implement better ways to uniquely identify each entry)
Oh wow. Thanks! @OBe95
And here I though for the first time the problem is not between the computer screen and the chair, but here I am 😄