diff --git a/src/fields/optional/fieldVueMultiSelect.vue b/src/fields/optional/fieldVueMultiSelect.vue index 694219e8..63363a88 100644 --- a/src/fields/optional/fieldVueMultiSelect.vue +++ b/src/fields/optional/fieldVueMultiSelect.vue @@ -58,10 +58,11 @@ } }, customLabel(){ - if (typeof this.schema.selectOptions !== "undefined" && typeof this.schema.selectOptions.customLabel !== "undefined" && this.schema.selectOptions.customLabel === "function") { + if (typeof this.schema.selectOptions !== "undefined" && typeof this.schema.selectOptions.customLabel !== "undefined" && typeof this.schema.selectOptions.customLabel === "function") { return this.schema.selectOptions.customLabel; } else { - return function(currentLabel){return currentLabel;}; + //this will let the multiselect library use the default behavior if customLabel is not specified + return undefined; } } }, diff --git a/test/unit/specs/fields/fieldVueMultiSelect.spec.js b/test/unit/specs/fields/fieldVueMultiSelect.spec.js index 6b4e0e24..6ede495c 100644 --- a/test/unit/specs/fields/fieldVueMultiSelect.spec.js +++ b/test/unit/specs/fields/fieldVueMultiSelect.spec.js @@ -100,5 +100,67 @@ describe("fieldVueMultiSelect.vue", function() { }); }); + + describe("with objects", () => { + const option = { + name: "Vue.js", + language: "JavaScript" + }; + let schema = {...schema}; + let model = { + city: [option] + }; + schema.values = [ + { + name: "Vue.js", + language: "JavaScript" + }, + { + name: "Rails", + language: "Ruby" + }, + { + name: "Sinatra", + language: "Ruby" + }]; + schema.selectOptions = {}; + before(() => { + createField(this, schema, model, false); + input = el.querySelector(".multiselect"); + }); + + it("model value should work with objects", (done) => { + schema.selectOptions = {label: "name", trackBy: "name"}; + vm.$nextTick(() => { + expect(model.city.length).to.be.equal(1); + expect(model.city[0]).to.be.eql(schema.values[0]); + done(); + }); + }); + + it("options should contain only text specified in label", (done) => { + schema.selectOptions = {label: "language", trackBy: "language"}; + vm.$nextTick(() => { + let options = input.querySelectorAll("li .multiselect__option"); + expect(options[0].querySelector("span").textContent).to.be.equal("JavaScript"); + done(); + }); + }); + + it("options should contain custom text specified in customLabel", (done) => { + schema.selectOptions = { + label: "name", + trackBy: "name", + customLabel: ({name, language}) => { + return `${name}-${language}`; + } + }; + vm.$nextTick(() => { + let options = input.querySelectorAll("li .multiselect__option"); + expect(options[0].querySelector("span").textContent).to.be.equal("Vue.js-JavaScript"); + done(); + }); + }); + }); }); }); \ No newline at end of file