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 c954f12d6..af611368a 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",
@@ -129,6 +129,34 @@ export default {
additionalButtonStyling: String,
isSmallQuestionText: Boolean,
availability: String,
+ 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) {
@@ -227,6 +255,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' : ''">