fixed autopopulation rules

src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js

@@ -270,7 +270,7 @@ function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelV
     const mountOptions = getMountOptions({
         route: {
             query: {
-                iisPage: "vehicle-parts",
+                issPage: "vehicle-parts",
             },
         },
     });

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

@@ -4,7 +4,7 @@
     </div>
     <div class="nested-radio">
         <div class="row my-2">
-            <div class="col">
+            <div class="col mx-1">
                 <buttonQuestion
                     v-model="selectedTint"
                     :answers="tintSelectionOptions"
@@ -115,9 +115,10 @@ export default {
                 return this.modelValue?.partNumber;
             },
             set(newValue) {
+                console.log(this.selectedPartNumber)
                 this.$emit(
                     "update:modelValue",
-                    this.partsForSelectedTint.filter((part) => part.partNumber == newValue)[0]
+                    this.partsForSelectedTint.filter((part) => part.partNumber == newValue.value)[0]
                 );
             },
         },
@@ -150,7 +151,6 @@ export default {
 
                 // Add onto the final object
                 arr[itemColor].push(mappedItem);
-
                 return arr;
             }, {});
 
@@ -158,7 +158,7 @@ export default {
         },
 
         PartDataFromApi() {
-            return this.mainStore.pageData(this.$route.query.iisPage) ?? {};
+            return this.mainStore.pageData(this.$route.query.issPage) ?? {};
         },
     },
     methods: {
@@ -190,7 +190,31 @@ export default {
         // Check if only a single part is present for the tint and set the v-model if it is.
         AutoSelectIfSinglePart() {
             if (this.partsForSelectedTint?.length == 1) {
-                this.selectedPartNumber = this.partsForSelectedTint[0].partNumber;
+                this.selectedPartNumber = { value: this.partsForSelectedTint[0].partNumber };
+
+                this.$nextTick(() => {
+                    //select element with matching partNumber
+                    const element = document.querySelector('input[value=' + this.selectedPartNumber + ']').checked = true;
+                
+                });
+            }
+            else{
+                if(this.selectedPartNumber && this.partsForSelectedTint.filter(x => x.partNumber == this.selectedPartNumber).length > 0)
+                {
+                    this.$nextTick(() => {
+                    //select element with matching partNumber
+                        const element = document.querySelector('input[value=' + this.selectedPartNumber + ']').checked = true;
+                
+                    });
+                }
+                else{
+                    this.selectedPartNumber = { value: this.partsForSelectedTint[0].partNumber }
+                    this.$nextTick(() => {
+                    //select element with matching partNumber
+                        const element = document.querySelector('input[value=' + this.selectedPartNumber + ']').checked = true;
+                
+                    });
+                }
             }
         },
 
@@ -198,7 +222,7 @@ export default {
         LoadPreselectedValues() {
             this.$nextTick(() => {
                 if (this.modelValue !== undefined) {
-                    // Populate button-question model-value if parts data already exists in VueX
+                    // Populate button-question model-value if parts data already exists in store
                     this.selectedTint = this.modelValue?.color;
                 }
             });

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -7,7 +7,7 @@
                 cmsWidgetName="VehicleBannerWidget"
                 :displayGenericVehicleImage="false" />
             <siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
-            <div class="fade-on-route-transition sub-container make-tall">
+            <div class="fade-on-route-transition sub-container make-tall overflow-auto">
                 <div class="prevent-squish my-5">
                     <div class="row">
                         <div class="col">
@@ -178,7 +178,7 @@ export default {
             }
             // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
             if (this.isForwardActionDisabled) {
-                this.$refs.funnelFooter.removeLoader();
+                this.$refs.siteFooter.removeLoader();
                 throw new Error("Could not match any parts to the selected parts");
             }