Fix drag-n-drop reordering on relationship select field options. Refe…

…rences #2059.
statamic · Oct 30, 2020 · 788cc71 · 788cc71
1 parent ace8225
commit 788cc71
Showing 1 changed file with 22 additions and 8 deletions.
diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
@@ -34,23 +34,37 @@
                 <div class="text-sm text-grey-70 text-left py-1 px-2" v-text="__('No options to choose from.')" />
             </template>
             <template #footer="{ deselect }" v-if="multiple">
-                <div class="vs__selected-options-outside flex flex-wrap">
-                    <span v-for="item in items" class="vs__selected mt-1">
-                        {{ item.title }}
-                        <button @click="deselect(item)" type="button" :aria-label="__('Deselect option')" class="vs__deselect">
-                            <span>×</span>
-                        </button>
-                    </span>
-                </div>
+                <sortable-list
+                    item-class="sortable-item"
+                    handle-class="sortable-item"
+                    :value="items"
+                    @input="input"
+                >
+                    <div class="vs__selected-options-outside flex flex-wrap">
+                        <span v-for="item in items" :key="item.id" class="vs__selected mt-1 sortable-item">
+                            {{ item.title }}
+                            <button @click="deselect(item)" type="button" :aria-label="__('Deselect option')" class="vs__deselect">
+                                <span>×</span>
+                            </button>
+                        </span>
+                    </div>
+                </sortable-list>
             </template>
         </v-select>
     </div>
 
 </template>
 
 <script>
+import { SortableList, SortableItem } from '../../sortable/Sortable';
+
 export default {
 
+    components: {
+        SortableList,
+        SortableItem,
+    },
+
     props: {
         items: Array,
         url: String,