From 2197f0c463580e50255eae43023c6d667cbc793c Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Mon, 11 Dec 2023 20:20:36 +0530
Subject: [PATCH] CSR-1872

---
 src/layouts/vehicle/vehicle.vue | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 46c6a5b61..049ac836f 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -17,7 +17,7 @@
                         cmsWidgetName="VehicleYearQuestion"
                         validationRules="year-required"
                         placeHolderText="Select year"
-                        inputId="yearQuestionField" />
+                        customDropdownId="yearQuestionField" />
 
                     <vehicleQuestion
                         ref="vehicleMakeQuestion"
@@ -27,7 +27,7 @@
                         cmsWidgetName="VehicleMakeQuestion"
                         validationRules="make-required"
                         placeHolderText="Select make"
-                        inputId="makeQuestionField" />
+                        customDropdownId="makeQuestionField" />
 
                     <vehicleQuestion
                         ref="vehicleModelQuestion"
@@ -37,7 +37,7 @@
                         :options="modelOptions"
                         validationRules="model-required"
                         placeHolderText="Select model"
-                        inputId="modelQuestionField" />
+                        customDropdownId="modelQuestionField" />
 
                     <vehicleQuestion
                         ref="vehicleStyleQuestion"
@@ -47,7 +47,7 @@
                         :options="styleOptions"
                         validationRules="style-required"
                         placeHolderText="Select style"
-                        inputId="styleQuestionField" />
+                        customDropdownId="styleQuestionField" />
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="displayGeneric"
@@ -226,6 +226,7 @@ export default {
     watch: {
         async selectedYear(year) {
             if (year) {
+                this.yearDropdown.disabled = true;
                 const result = await this.getMakeOptions(year);
                 this.makeOptions = result?.data;
                 if (this.selectedYearfromStore() !== year) {
@@ -234,6 +235,8 @@ export default {
                     this.selectedStyle = null;
                     this.carId = null;
                 }
+                this.yearDropdown.disabled = false;
+                this.yearDropdown.focus();
             } else {
                 this.makeOptions = [];
                 this.selectedMake = null;
@@ -244,6 +247,7 @@ export default {
         },
         async selectedMake(make) {
             if (make) {
+                this.makeDropdown.disabled = true;
                 const result = await this.getModelOptions(this.selectedYear, make);
                 this.modelOptions = result?.data;
                 if (this.modelOptions.length === 1) this.selectedModel = this.modelOptions[0];
@@ -252,6 +256,8 @@ export default {
                     this.selectedStyle = null;
                     this.carId = null;
                 }
+                this.makeDropdown.disabled = false;
+                this.makeDropdown.focus();
             } else {
                 this.modelOptions = [];
                 this.selectedModel = null;
@@ -261,6 +267,7 @@ export default {
         },
         async selectedModel(model) {
             if (model) {
+                this.modelDropdown.disabled = true;
                 const result = await this.getStyleOptions(
                     this.selectedYear,
                     this.selectedMake,
@@ -277,6 +284,8 @@ export default {
                     this.selectedStyle = null;
                     this.carId = null;
                 }
+                this.modelDropdown.disabled = false;
+                this.modelDropdown.focus();
             } else {
                 this.styleOptions = [];
                 this.selectedStyle = null;
@@ -285,7 +294,10 @@ export default {
         },
         async selectedStyle(style) {
             if (style) {
+                this.styleDropdown.disabled = true;
                 this.getVehicleDetails();
+                this.styleDropdown.disabled = false;
+                this.styleDropdown.focus();
             } else {
                 this.imageUrl = null;
                 this.carId = null;
@@ -303,6 +315,18 @@ export default {
             else if (this.imageUrl == null && this.carId !== null) return false;
             else return true;
         },
+        yearDropdown() {
+            return document.getElementById("yearQuestionField");
+        },
+        makeDropdown() {
+            return document.getElementById("makeQuestionField");
+        },
+        modelDropdown() {
+            return document.getElementById("modelQuestionField");
+        },
+        styleDropdown() {
+            return document.getElementById("styleQuestionField");
+        },
         allDataRetrieved() {
             return (
                 !!this.selectedYear &&