diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index 8ef069c2b..68aceec51 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -109,11 +109,15 @@ export default { const fieldOptions = { type: inputType, checkedValue: props.value, + potentialInitialValue: props.selectedValues, }; - if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) { - fieldOptions['initialValue'] = fieldOptions.checkedValue; + // Set initialValue for validation setup if pre-selected + // NOTE: props.selectedValues could be an array of strings, or an array of integers... + if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) { + fieldOptions['initialValue'] = fieldOptions.potentialInitialValue; } + const { checked, handleChange, @@ -124,6 +128,7 @@ export default { checked, handleChange, errors, + fieldOptions, // only need to expose this for unit test purposes }; }, }; diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js index 18707e45f..7cc885b49 100644 --- a/src/ux-components/list-button/list-button.spec.js +++ b/src/ux-components/list-button/list-button.spec.js @@ -166,11 +166,15 @@ describe("list-button.vue", () => { isRequired: true, isWide: false, modelValue: ["List Card Checkbox"], + buttonID: 'list-card-id' }, }); + wrapper.vm.handleCheckChange(); + // Assert - expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]); + expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean, buttonId: 'list-card-id'}]); + }); it("Should set checkValue data if selectedButtonIDs has value(s)", async () => { @@ -192,4 +196,5 @@ describe("list-button.vue", () => { // Assert expect(wrapper.componentVM.checkValue).toEqual("Car-Front"); }); + }); diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 3a8e65fc0..caef528de 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -100,7 +100,13 @@ export default { handleCheckChange(newValue, oldValue){ const isInitialization = typeof(oldValue) === 'function'; if (!isInitialization) { - this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() }); + const emitEvent = { + checkValue: this.checkValue, + value: this.value.toString(), + buttonId: this.buttonID.toString(), + }; + this.$emit('isCheckedChanged', emitEvent); + this.$emit("update:modelValue", emitEvent); } }, }, @@ -109,14 +115,19 @@ export default { }, setup(props) { const inputType = props.isMultiSelect ? "checkbox" : "radio"; + const fieldOptions = { type: inputType, checkedValue: props.value, + potentialInitialValue: props.selectedValues, }; - if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) { - fieldOptions['initialValue'] = fieldOptions.checkedValue; + // Set initialValue for validation setup if pre-selected + // NOTE: props.selectedValues could be an array of strings, or an array of integers... + if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) { + fieldOptions['initialValue'] = fieldOptions.potentialInitialValue; } + const { checked, handleChange, @@ -127,6 +138,7 @@ export default { checked, handleChange, errors, + fieldOptions, // only need to expose this for unit test purposes }; }, }; diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js index 743392ee8..11f24abbb 100644 --- a/src/ux-components/list-card/list-card.spec.js +++ b/src/ux-components/list-card/list-card.spec.js @@ -232,5 +232,20 @@ describe("list-card.vue", () => { expect(wrapper.componentVM.checkValue).toEqual("Car-Front"); }); + it("Should set an initial value for validation if selectedValues include the value", async () => { + // Arrange + const wrapper = shallowMount(listCard, { + propsData: { + value: "Windshield", + groupName: "radio 1", + modelValue: ["Windshield"], + selectedValues: ["Windshield"], + }, + }); + + // Assert + expect(wrapper.vm.fieldOptions.initialValue).toEqual([ 'Windshield' ]); + }); + }); diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 8e88c4b68..d3a1fc712 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -58,6 +58,7 @@