From 781a1f8967ed6f56ddf98167bf79cdfd4a238e50 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 14 Feb 2022 17:11:53 -0500
Subject: [PATCH] Adding condition to when change event occurs on radio buttons

---
 .../button-question/button-question.vue               |  5 ++---
 .../vehicle-make/make-question/make-question.vue      |  2 +-
 .../vehicle-model/model-question/model-question.vue   |  2 +-
 .../vehicle-style/style-question/style-question.vue   |  2 +-
 .../vehicle-year/year-question/year-question.vue      |  2 +-
 .../list-button-horizontal.spec.js                    |  8 ++++----
 .../list-button-horizontal/list-button-horizontal.vue |  7 ++++---
 src/ux-components/list-button/list-button.spec.js     |  8 ++++----
 src/ux-components/list-button/list-button.vue         | 11 ++++++-----
 9 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 2040ab131..ae75d671e 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -19,7 +19,7 @@
               :textPosition="textPosition"
               :isMultiSelect="isMultiSelect"
               :groupName="groupName"
-              :loaderEnabled="loaderEnabled"
+              :selectingInitiatesLoad="selectingInitiatesLoad"
               :loaderColor="loaderColor"
               :loaderPosition="loaderPosition"
               :sizeInRem="sizeInRem"
@@ -31,7 +31,6 @@
               screenReaderOnlyText="(opens new window)"
               :colLength="this.answers.length < 3 ? '' : '-4'"
               :selectedButtonIDs="selectedValues"
-              :newPageOnSelect="isOverflowScrollable"
               data-test="button"
             />
           </div>
@@ -61,7 +60,7 @@ export default {
       type: String,
       default: "text-center",
     },
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: {
       type: String,
       default: "blue",
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index 9fb2d6ea1..bc8ce5f9f 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="makes"
     groupName="Choose Vehicle Make"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index e79b8bafc..1876630ef 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="models"
     groupName="Choose Vehicle Model"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index bfec78571..a923c9128 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="styles"
     groupName="Choose Vehicle Style"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 96d047244..97c2ab618 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="years"
     groupName="Choose Vehicle Year"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index 5cbe02e75..3976b9857 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -91,7 +91,7 @@ describe("list-button-horizontal.vue", () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -113,7 +113,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         loaderColor: "blue",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -135,7 +135,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         loaderPosition: "right",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -157,7 +157,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         sizeInRem: 1,
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 034f97c07..5044a7fb0 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -12,7 +12,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="handleCheckChange"
+      @change="!selectingInitiatesLoad ? handleCheckChange : ''"
     />
     <label
       tabindex="-1"
@@ -60,7 +60,7 @@ export default {
     buttonLabelSubCopy: String,
     screenReaderOnlyText: String,
     textPosition: String,
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number, String],
@@ -88,8 +88,9 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      if (this.loaderEnabled) {
+      if(this.selectingInitiatesLoad) {
         this.displayLoader();
+        this.handleCheckChange();
       }
       this.handleChange(value);
     },
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 6592e64f7..a07d2d9e0 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -91,7 +91,7 @@ describe("list-button.vue", () => {
     // Act
     const wrapper = shallowMount(listButton, {
       propsData: {
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -113,7 +113,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         loaderColor: "blue",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -135,7 +135,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         loaderPosition: "right",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -157,7 +157,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         sizeInRem: 1,
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 8365834a1..46cf9fca4 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -12,7 +12,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="!newPageOnSelect ? handleCheckChange : ''"
+      @change="!selectingInitiatesLoad ? handleCheckChange : ''"
     >
     <label
       tabindex="-1"
@@ -63,7 +63,7 @@ export default {
     textPosition: String,
     buttonLabelSubCopy: String,
     screenReaderOnlyText: String,
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number,String],
@@ -73,7 +73,6 @@ export default {
       default: "",
     },
     selectedButtonIDs: [Array, String],
-    newPageOnSelect: Boolean,
   },
   data() {
     return {
@@ -91,8 +90,10 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      this.loaderEnabled ? this.displayLoader() : '';
-      this.newPageOnSelect ? this.handleCheckChange() : '';
+      if(this.selectingInitiatesLoad) {
+        this.displayLoader();
+        this.handleCheckChange();
+      }
       this.handleChange(value);
     },
     handleCheckChange(newValue, oldValue){