diff --git a/src/digital-components/button-question/button-question.spec.js b/src/digital-components/button-question/button-question.spec.js index e9e1d70a4..ce8d87fab 100644 --- a/src/digital-components/button-question/button-question.spec.js +++ b/src/digital-components/button-question/button-question.spec.js @@ -1,6 +1,9 @@ import { shallowMount, mount } from "@vue/test-utils"; import buttonQuestion from "./button-question"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import crypto from "crypto"; + +global.crypto = crypto; describe("buttonQuestion.vue", () => { it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => { diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 44a427275..7067455d4 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -86,7 +86,7 @@ import listButton from "@/ux-components/list-button/list-button"; import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal"; import listCard from "@/ux-components/list-card/list-card"; import radio from "@/ux-components/radio/radio"; -import { ErrorMessage } from "vee-validate"; +import { useField, ErrorMessage } from "vee-validate"; export default { name: "buttonQuestion", @@ -128,6 +128,34 @@ export default { valueToLogType: String, additionalButtonStyling: String, isSmallQuestionText: Boolean, + customButtonQuestionId: String, + }, + setup(props) { + const buttonQuestionId = !props.customButtonQuestionId + ? `button-question-${crypto.randomUUID()}` + : props.customButtonQuestionId; + + const propsClone = Object.assign({}, props); + const modelValue = propsClone.modelValue; + + const fieldOptions = { + value: modelValue, + initialValue: modelValue, + }; + + const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } = + useField(buttonQuestionId, props.validationRules, fieldOptions); + + return { + buttonQuestionId, + errorMessage, + handleBlur, + handleChange, + validate, + meta, + errors, + resetField, + }; }, beforeMount() { if (this.buttonTypeObject) { @@ -226,6 +254,11 @@ export default { this.$emit(`buttonEvent.${eventName}`, event.args); }, }, + watch: { + modelValue() { + this.resetField(); + }, + }, components: { listButton, listButtonHorizontal, diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue index e122837c4..9f24973a3 100644 --- a/src/digital-components/dropdown-question/dropdown-question.vue +++ b/src/digital-components/dropdown-question/dropdown-question.vue @@ -3,15 +3,15 @@ class="dropdown-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">