Merge pull request #355 from Safelite/feature/digital/SSR-468.2

Feature/digital/ssr 468.2

src/digital-components/base-input-button/base-input-button.vue

@@ -121,9 +121,7 @@ export default {
             return this.isMultiSelect ? "checkbox" : "radio";
         },
         buttonId() {
-            return `${this.groupName?.replace(" ", "-")}-${this.value
+            return `${this.groupName}-${this.value}`.replaceAll(" ", "-");
-                ?.toString()
-                ?.replace(" ", "-")}`;
         },
         isValueSelectedOnClick() {
             return this.isMultiSelect || this.selectingInitiatesLoad;

src/digital-components/button-question/button-question.vue

@@ -31,7 +31,7 @@
                     <div
                         :class="getComponentWrapperClasses"
                         v-for="answer in buttonsInfo"
-                        :key="answer.value ? answer.value : answer">
+                        :key="answer.value ?? answer">
                         <component
                             :is="buttonTypeString"
                             :buttonLabel="answer.buttonLabel"

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -12,7 +12,7 @@
                     :isWide="true"
                     altText=""
                     isRequired
-                    :groupName="`${glassLocation}-${glassName}`"
+                    :groupName="replaceAllSpaceWithDash(`${glassLocation}-${glassName}`)"
                     :validationRules="tintValidationRules">
                     <div class="row my-2" aria-live="polite">
                         <div class="col">
@@ -27,7 +27,7 @@
                                 :loaderEnabled="false"
                                 isRequired
                                 isSmallQuestionText
-                                :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
+                                :groupName="replaceAllSpaceWithDash(`${glassLocation}-${glassName}-${selectedTint}`)"
                                 :validationRules="partValidationRules" />
                         </div>
                     </div>
@@ -210,6 +210,10 @@ export default {
                 }
             });
         },
+
+        replaceAllSpaceWithDash(str) {
+            return String(str).replaceAll(" ", "-");
+        },
     },
     watch: {
         selectedTint() {

src/ux-components/radio/radio.vue

@@ -76,21 +76,27 @@ export default {
             value: inputValue,
             handleChange,
             errors,
+            resetField
         } = useField(props.groupName, props.validationRules,
         {
-                type: inputType,
+            type: inputType
-                checkedValue: props.value,
         });
+
         return {
             handleChange,
             errors,
+            resetField
         };
     },
-    };
+    unmounted(){
-    </script>
+        this.resetField();
+    }
+};
+</script>
 
-    <style lang="scss" scoped>
+<style lang="scss" scoped>
-    .form-check {
+
+.form-check {
     position: relative;
 
     label {
@@ -140,5 +146,5 @@ export default {
         font-size: .875rem;
         color: $gray-600;
     }
-    }
+}
-    </style>
+</style>