Elements being set with "display: none" about vue.draggable HOT 8 CLOSED

Hello,

the problem is in the Sortable.js. on the line 662 they use _css(cloneEl, 'display', 'none'); and does not work. I added _css(cloneEl, 'opacity', '0'); and works for me.

from vue.draggable.

@JTallis . Could you provide a js-fiddle please?

from vue.draggable.

Sadly, I cannot. I've copied as much as I possibly can to a jsfiddle but it doesn't duplicate the issue. That is strange. Here was my fiddle attempt: https://jsfiddle.net/f1scf0ym/

I can however provide a live URL: http://vue.chatolia.com/chat (Note that a lot of features are not present such as visually displaying error messages so it's a good idea to check the console where all incoming data is logged).

I can also provide a link to the repository. Here is the file that I'm having issues with: https://github.com/JTallis/Chatclient/blob/master/resources/assets/js/components/chat/index.vue

Seeing as I cannot reproduce the issue on jsfiddle, makes me believe the issue is elsewhere. However I have no idea. I know that you are unable to edit the code to debug it further but it gives you a chance to see what is going on and have a look over the code. I repeat, though, removing :list="tabs" seems to fix the issue. I apologise that I am unable to reproduce the issue in a fiddle.

To see the issue on the live link: Enter a nickname so you are connected to the chat. Click on the + icon and choose the room 18 Plus on the left. Move the + tab to the right to see that the close icon vanishes. Step 2 isn't necessary, but I find it allows me to see the behaviour a little bit better.

I believe there was a way to detect when styling has been changed and from what but I can't remember what it is. I can also say that the states remain the same when the tabs get moved. options.closeable remains true for all tabs except the + tab which is what is intended.

from vue.draggable.

Hello @JTallis , I have no clue what is happening here. The list options will trigger an change in the underlying list that will trigger a re-render, so no idea why this strange behaviour.

The fact that a simple fiddle does not reproduce the issue shows that the problem is not related to the template and vue.draggable but to another factor.

I would suggest 2 things:

1. create a template for the item of the list and see if this correct the issue
2. Try to take out the draggable component and replace by a ul element. Then in the console alter the tabs list and see if the problem is still there. If so, the problem is happening when list re-render and is not related to draggable.

from vue.draggable.

I was adding more features to the chat while awaiting your reply. The issue fixed itself. I tried to revert the changes I remember making to see if I could reproduce the issue again and I couldn't. I have no idea what the issue was, certainly an odd one.

If the issue were to pop up again, I'll try out your suggestions and see if I can further debug such a thing. Thanks.

from vue.draggable.

@JTallis @David-Desmaisons
Same issue, sadly when I move the code into jsfiddle, fail to reproduce.

"vuedraggable": "^2.8.4"
"vue": "^2.1.10"

from vue.draggable.

@varHarrie I need a jsfidle to investigate. It is possible that working on this, you find waht is causing the issue..

from vue.draggable.

@andreseloysv Same thing was happening with me because I am using d-flex class on parent element. I tried your solution and it worked for me, which is good. However, do you know a way so it won't overwrite sortable.js when some other developer simply runs 'npm run dev'. In order words, how can I instruct webpack or npm to only use my modified sortable.js file and not use from the package?
Thanks.

from vue.draggable.