diff --git a/src/digital-components/base-input-button/base-input-button.spec.js b/src/digital-components/base-input-button/base-input-button.spec.js index 507c1ec59..9b9585dd0 100644 --- a/src/digital-components/base-input-button/base-input-button.spec.js +++ b/src/digital-components/base-input-button/base-input-button.spec.js @@ -1123,42 +1123,6 @@ describe("baseInputButton.vue", () => { }); }); - describe("buttonId", () => { - test("groupName and value combo yield correct id for input button with string value", () => { - // Arrange/Act - const { wrapper } = setupMocks({ - mockData: { - propsData: { - groupName: "my test-name", - value: "Aaa-BBB CcC", - }, - }, - }); - - // Assert - const inputElement = wrapper.find("input"); - expect(wrapper.vm.buttonId).toBe("my-test-name-Aaa-BBB-CcC"); - expect(inputElement.attributes().id).toBe("my-test-name-Aaa-BBB-CcC"); - }); - - test("groupName and value combo yield correct id for input button with number value", () => { - // Arrange/Act - const { wrapper } = setupMocks({ - mockData: { - propsData: { - groupName: "my test-name", - value: 2, - }, - }, - }); - - // Assert - const inputElement = wrapper.find("input"); - expect(wrapper.vm.buttonId).toBe("my-test-name-2"); - expect(inputElement.attributes().id).toBe("my-test-name-2"); - }); - }); - describe("inputType", () => { test("isMultiSelect is true => inputType is 'checkbox'", () => { // Arrange/Act diff --git a/src/digital-components/base-input-button/base-input-button.vue b/src/digital-components/base-input-button/base-input-button.vue index e9b5e6411..a21233362 100644 --- a/src/digital-components/base-input-button/base-input-button.vue +++ b/src/digital-components/base-input-button/base-input-button.vue @@ -34,6 +34,7 @@ import { handleInputComponentBlur, } from "@/helpers/button-question-focus-helper"; import { inputButtonProps } from "@/digital-components/base-input-button/button-functionality-props"; +import { v4 as uuidv4 } from "uuid"; export default { name: "base-input-button", @@ -45,6 +46,7 @@ export default { data() { return { valueToEmit: null, + buttonId: uuidv4(), }; }, mounted() { @@ -153,11 +155,6 @@ export default { inputType() { return this.isMultiSelect ? "checkbox" : "radio"; }, - buttonId() { - return `${this.groupName?.replace(" ", "-")}-${this.value - ?.toString() - ?.replace(" ", "-")}`; - }, isValueSelectedOnClick() { return this.isMultiSelect || this.selectingInitiatesLoad; }, diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index d22bb9c81..cca4f92a6 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -1,5 +1,5 @@