Open
Description
Problem with drag animation in safari when rows of a table are dragged
Bug video recording (in safari)
Expected behavior (in chrome - works in IE also)
Information
This is a bootstrap-vue table
Sortable JS is used as a custom vue directive on the bootstrap-vue table. I've also tried applying sortable JS on component mount, behavior remains the same.
<template>
<b-table
v-sortable="sortableOptions"
:items="getSortedForms"
:fields="columns"
:tbody-tr-class="rowClass"
primary-key="key"
show-empty
>
<template v-slot:empty>
<!-- some content here -->
</template>
<template v-if="getSortedForms.length > 0" v-slot:head(selectFormAction)>
<!-- check-box HTML here -->
</template>
<template v-slot:cell(col1)="form">
<div :id="form.value.Key">
<!-- check-box HTML here -->
</div>
</template>
<template v-slot:cell(col2)="formItem">
<!-- this is a custom component -->
<form-display :formDTO="formItem.value" />
</template>
<template v-slot:cell(col3)="formStatusItem">
<!-- some text here -->
</div>
</template>
<template v-slot:cell(col4)="actionItem">
<div>
<!-- this is a custom component -->
<form-progress-bar />
</div>
</template>
<template v-slot:cell(col5)="utilityItem">
<div class="utilitySet">
<div
v-for="(utility, id) in getSomeList()"
:key="id"
>
<FormUtility :form="utilityItem.value.formDTO"></FormUtility>
</div>
</div>
</template>
</b-table>
</template>
<script>
import { BTable } from "bootstrap-vue";
export default {
name: "FormsList",
directives: {
sortable: {
bind(el, binding, vnode) {
const table = el;
Sortable.create(table.querySelector("tbody"), {});
},
},
},
components: {
BTable,
},
data() {
...
},
computed: {
...
},
methods: {
...
}
};Additional context
The problem seems to be only the animation UI. Drag and drop functionality works fine in Safari also.
All the columns of the bootstrap-vue table are custom vue components (implemented using the slot functionality).