diff --git a/assets/js/app/editor/Components/Imagelist.vue b/assets/js/app/editor/Components/Imagelist.vue
index 8e7e57875b..6e417aff2a 100644
--- a/assets/js/app/editor/Components/Imagelist.vue
+++ b/assets/js/app/editor/Components/Imagelist.vue
@@ -119,7 +119,7 @@ export default {
let fieldNumber = this.getFieldNumberFromElement(elem);
let updatedImage = this.containerImages[fieldNumber];
updatedImage.hidden = true;
- this.$set(this.containerImages, fieldNumber, updatedImage);
+ this.containerImages.splice(fieldNumber, 1, updatedImage);
},
fieldName(index) {
return this.name + '[' + index + ']';
diff --git a/assets/js/app/editor/Components/Select.vue b/assets/js/app/editor/Components/Select.vue
index 9c87b06913..dcc5ad1879 100644
--- a/assets/js/app/editor/Components/Select.vue
+++ b/assets/js/app/editor/Components/Select.vue
@@ -19,24 +19,22 @@
:loading="isLoading"
@tag="addTag"
>
-
-
- {{ raw(props.option.value) }}
-
{{ raw(props.option.value) }}
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/tests/unit/components/Select.spec.ts b/tests/unit/components/Select.spec.ts
index 188434762c..42ae0c8659 100644
--- a/tests/unit/components/Select.spec.ts
+++ b/tests/unit/components/Select.spec.ts
@@ -180,6 +180,23 @@ describe('EditorSelect', () => {
expect(wrapper.find('.multiselect__tag__edit a').attributes('href')).toBe('/bolt/edit/1');
});
+ it('offers an edit link on the selected record when only one can be picked', async () => {
+ const linked = [{ key: 'a', value: 'A record', link_to_record_url: '/bolt/edit/1' }];
+ const wrapper = mountSelect({ options: linked, value: 'a', multiple: false });
+ await nextTick();
+
+ expect(wrapper.find('.stub-single-label .multiselect__tag__edit a').attributes('href')).toBe('/bolt/edit/1');
+ });
+
+ it('leaves the label of a selected option without a link to the picker', async () => {
+ // Rendering nothing makes vue-multiselect fall back to its own label.
+ const wrapper = mountSelect({ value: 'published', multiple: false });
+ await nextTick();
+
+ expect(wrapper.find('.stub-single-label').exists()).toBe(true);
+ expect(wrapper.find('.stub-single-label').text()).toBe('');
+ });
+
it('does not offer dragging when tags are freely editable', async () => {
const wrapper = mountSelect({ value: ['draft'], taggable: true });
await nextTick();
diff --git a/tests/unit/helpers/stubs.ts b/tests/unit/helpers/stubs.ts
index 812ef4f2e9..162de76e64 100644
--- a/tests/unit/helpers/stubs.ts
+++ b/tests/unit/helpers/stubs.ts
@@ -30,6 +30,10 @@ export const multiselectStub = {
tagOptions(this: { value: unknown }) {
return Array.isArray(this.value) ? this.value : [];
},
+ /** Like vue-multiselect, which labels the first item of an array value. */
+ singleValue(this: { value: unknown }) {
+ return Array.isArray(this.value) ? this.value[0] : this.value;
+ },
},
methods: {
/** Pick an option, as clicking one in the real dropdown would. */
@@ -43,8 +47,8 @@ export const multiselectStub = {
},
template: `