Vue.draggable: Elements being set with "display: none"

[JTallis]

I have an issue where one of my elements are being hidden. I have no idea how to debug the issue but I have confirmed it's related to :list="tabs" as if I removed that, it all works as expected.

Here is a portion of my template:

<draggable class="nav nav-tabs" :element="ul" :list="tabs">
    <li class="nav-item" v-for="tab in tabs">
        <a href="#" class="nav-link" :class="{ active: tab.active }" @click.prevent="selectTab(tab)">
            <i :class="tab.icon" v-if="tab.icon"></i>
            <span v-show="tab.options.showname">{{ tab.name }}</span>
            <span @click.prevent.stop="requestRemoveTab(tab)" v-if="tab.options.closeable">&times;</span>
        </a>
    </li>
</draggable>

Here is one of my tab creations that utilises all possible options:

this.createTab(`roomlist`, {
    icon: 'fa fa-plus',
    name: 'Rooms',
    component: 'roomlistTabView',
    active: true,
    options: {
        showname: false,
        closeable: false
    }
});

The result is that everything displays fine until I start dragging tabs around. What happens then is the second span element (containing ×) is being hidden using the inline css display: none. I can confirm that the other elements are being displayed. Adding in :list="tabs" from what I know is optional in my case and it works just fine either way but the issue is with that, for sure.

If I'm also correct, v-if would not render the element unless it returns true so something strange is definitely going on there hence why I'm unsure how to debug it. Anyone know what might be going on?

[David-Desmaisons]

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

[JTallis]

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.

[David-Desmaisons]

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.

[JTallis]

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.

[varHarrie]

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

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

[David-Desmaisons]

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

[andreseloysv]

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.

[humayunghani]

@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.